diff --git a/docs/coding-rules/presets/erp-preset-type-b-master-detail.html b/docs/coding-rules/presets/erp-preset-type-b-master-detail.html
index 9ca91da2..74af9e66 100644
--- a/docs/coding-rules/presets/erp-preset-type-b-master-detail.html
+++ b/docs/coding-rules/presets/erp-preset-type-b-master-detail.html
@@ -95,21 +95,19 @@ html, body { height: 100%; overflow: hidden; font-size: 13px; }
    ═══════════════════════════════════════════ */
 .main-content {
   display: flex; flex: 1; overflow: hidden;
-  background: hsl(var(--background));
 }
 
 /* Master Panel (Left) */
 .panel-master {
   display: flex; flex-direction: column;
   min-width: 250px; overflow: hidden;
-  background: hsl(var(--muted));
-  border-right: none;
+  background: hsl(var(--background));
 }
 .panel-header {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 12px 16px;
+  padding: 10px 16px; height: 44px; min-height: 44px;
   border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted));
+  background: hsl(var(--card));
 }
 .panel-header-left { display: flex; align-items: center; gap: 10px; }
 .panel-title { font-size: 13px; font-weight: 700; color: hsl(var(--foreground)); }
@@ -121,26 +119,19 @@ html, body { height: 100%; overflow: hidden; font-size: 13px; }
 
 /* Resize Handle */
 .resize-handle {
-  width: 6px; min-width: 6px; cursor: col-resize;
-  background: hsl(var(--border)); transition: background 0.15s;
-  position: relative; z-index: 10;
+  width: 5px; min-width: 5px; cursor: col-resize;
+  background: hsl(var(--border) / 0.6); transition: all 0.15s;
+  position: relative; z-index: 10; flex-shrink: 0;
 }
 .resize-handle:hover, .resize-handle.active {
-  background: hsl(var(--primary));
+  background: hsl(var(--primary) / 0.5);
 }
-.resize-handle::after {
-  content: ''; position: absolute; top: 50%; left: 50%;
-  transform: translate(-50%, -50%);
-  width: 2px; height: 30px; border-radius: 2px;
-  background: hsl(var(--muted-foreground) / 0.5); opacity: 0; transition: opacity 0.15s;
-}
-.resize-handle:hover::after, .resize-handle.active::after { opacity: 1; }
 
 /* Detail Panel (Right) */
 .panel-detail {
   display: flex; flex-direction: column;
   min-width: 250px; flex: 1; overflow: hidden;
-  background: hsl(var(--muted));
+  background: hsl(var(--background));
 }
 
 /* ═══════════════════════════════════════════
@@ -148,6 +139,7 @@ html, body { height: 100%; overflow: hidden; font-size: 13px; }
    ═══════════════════════════════════════════ */
 .table-wrapper {
   flex: 1; overflow: auto; position: relative;
+  background: hsl(var(--background));
 }
 table {
   width: 100%; border-collapse: collapse; table-layout: fixed;
@@ -156,22 +148,22 @@ thead { position: sticky; top: 0; z-index: 5; }
 thead th {
   font-size: 11px; font-weight: 700; text-transform: uppercase;
   letter-spacing: 0.05em; color: hsl(var(--muted-foreground));
-  padding: 10px 12px; text-align: left;
-  background: hsl(var(--card)); border-bottom: 1px solid hsl(var(--border));
+  padding: 9px 12px; text-align: left;
+  background: hsl(var(--muted)); border-bottom: 1px solid hsl(var(--border));
   white-space: nowrap; user-select: none;
 }
 tbody tr {
-  border-bottom: 1px solid hsl(var(--border));
+  border-bottom: 1px solid hsl(var(--border) / 0.5);
   cursor: pointer; transition: all 0.1s;
   border-left: 3px solid transparent;
 }
-tbody tr:hover { background: hsl(var(--accent)); }
+tbody tr:hover { background: hsl(var(--accent) / 0.5); }
 tbody tr.selected {
-  background: hsl(var(--primary) / 0.08);
+  background: hsl(var(--primary) / 0.06);
   border-left: 3px solid hsl(var(--primary));
 }
 tbody td {
-  padding: 9px 12px; color: hsl(var(--muted-foreground));
+  padding: 8px 12px; color: hsl(var(--muted-foreground));
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 tbody tr.selected td { color: hsl(var(--foreground)); }
@@ -201,8 +193,8 @@ tbody tr.selected .cell-mono { color: hsl(var(--primary)); }
 .empty-state {
   display: flex; flex-direction: column; align-items: center; justify-content: center;
   flex: 1; padding: 40px;
-  border: 2px dashed hsl(var(--border)); border-radius: var(--radius);
-  margin: 20px; text-align: center;
+  border: 2px dashed hsl(var(--border) / 0.6); border-radius: var(--radius);
+  margin: 16px; text-align: center;
 }
 .empty-state-icon {
   width: 48px; height: 48px; color: hsl(var(--muted-foreground) / 0.5); margin-bottom: 16px;
@@ -215,17 +207,18 @@ tbody tr.selected .cell-mono { color: hsl(var(--primary)); }
    ═══════════════════════════════════════════ */
 .tabs {
   display: flex; border-bottom: 1px solid hsl(var(--border));
-  background: hsl(var(--muted)); padding: 0 16px;
+  background: hsl(var(--card)); padding: 0 16px;
+  min-height: 38px;
 }
 .tab {
   display: flex; align-items: center; gap: 6px;
-  padding: 10px 16px; font-size: 12px; font-weight: 600;
+  padding: 9px 16px; font-size: 12px; font-weight: 600;
   color: hsl(var(--muted-foreground)); cursor: pointer;
   border-bottom: 2px solid transparent;
   transition: all 0.15s; user-select: none;
   white-space: nowrap;
 }
-.tab:hover { color: hsl(var(--muted-foreground)); }
+.tab:hover { color: hsl(var(--foreground)); }
 .tab.active {
   color: hsl(var(--foreground)); border-bottom-color: hsl(var(--primary));
 }
@@ -236,7 +229,9 @@ tbody tr.selected .cell-mono { color: hsl(var(--primary)); }
 /* Detail Sub-Header */
 .detail-sub-header {
   display: flex; align-items: center; justify-content: space-between;
-  padding: 10px 16px; border-bottom: 1px solid hsl(var(--border));
+  padding: 8px 16px; border-bottom: 1px solid hsl(var(--border));
+  background: hsl(var(--card));
+  min-height: 38px;
 }
 .detail-sub-title { font-size: 12px; font-weight: 600; color: hsl(var(--muted-foreground)); }
 .detail-sub-actions { display: flex; gap: 6px; }
diff --git a/docs/customer-management-tables.md b/docs/customer-management-tables.md
new file mode 100644
index 00000000..68e1d7de
--- /dev/null
+++ b/docs/customer-management-tables.md
@@ -0,0 +1,205 @@
+# 거래처관리 테이블 구조
+
+## 개요
+
+거래처관리 화면(`COMPANY_16/sales/customer`)에서 사용하는 테이블 목록.
+모든 테이블은 FK 제약 없이 **값 기반 참조**로 연결됨.
+
+---
+
+## 1. customer_mng (거래처 마스터)
+
+> 거래처 기본 정보. 메인 테이블.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | integer | NO | auto increment | PK |
+| `customer_code` | varchar | YES | | 거래처 코드 (채번: `CUST-XXX`) |
+| `customer_name` | varchar | YES | | 거래처명 |
+| `division` | varchar | YES | | 거래 유형 (카테고리) |
+| `contact_person` | varchar | YES | | 담당자명 (레거시, `customer_contact`로 대체) |
+| `contact_phone` | varchar | YES | | 전화번호 (레거시) |
+| `email` | varchar | YES | | 이메일 (레거시) |
+| `business_number` | varchar | YES | | 사업자번호 |
+| `address` | text | YES | | 주소 |
+| `status` | varchar | YES | | 상태 (카테고리: 활성/비활성) |
+| `delivery_location` | varchar | YES | | 납품장소 (레거시, `delivery_destination`으로 대체) |
+| `internal_manager` | varchar | YES | | 사내담당자 (user_info.user_id 참조) |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamptz | YES | | 생성일 |
+| `updated_date` | timestamptz | YES | | 수정일 |
+
+**채번 규칙**: `rule-1773627245664-rw6ny43cf` (거래처코드, `customer_code` 컬럼)
+
+---
+
+## 2. customer_contact (거래처 담당자)
+
+> 거래처별 복수 담당자 관리. `customer_id`(customer_mng.id)로 연결.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | varchar | NO | | PK (UUID) |
+| `customer_id` | varchar | YES | | customer_mng.id 참조 |
+| `contact_name` | varchar | YES | | 담당자명 |
+| `contact_phone` | varchar | YES | | 연락처 |
+| `contact_email` | varchar | YES | | 이메일 |
+| `department` | varchar | YES | | 부서 |
+| `is_main` | varchar | YES | `'N'` | 메인 담당자 여부 (`Y`/`N`, 복수 가능) |
+| `memo` | varchar | YES | | 메모 |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamp | YES | `now()` | 생성일 |
+| `updated_date` | timestamp | YES | `now()` | 수정일 |
+
+**참조 방식**: `customer_id` = `customer_mng.id` (값 기반, FK 없음)
+**메인 목록 표시**: `is_main = 'Y'`인 담당자의 이름/전화/이메일이 거래처 목록에 표시됨
+
+---
+
+## 3. customer_tax_type (거래처 세금유형)
+
+> 거래처별 세금유형 다중 설정. `customer_id`(customer_mng.id)로 연결.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | varchar | NO | | PK (UUID) |
+| `customer_id` | varchar | YES | | customer_mng.id 참조 |
+| `tax_type_id` | varchar | YES | | 세금유형 코드 |
+| `tax_type_name` | varchar | YES | | 세금유형명 (카테고리) |
+| `rate` | numeric | YES | `0` | 세율 (%) |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamp | YES | `now()` | 생성일 |
+| `updated_date` | timestamp | YES | `now()` | 수정일 |
+
+**카테고리**: `customer_tax_type.tax_type_name` → 부가세(일반), 부가세(영세), 면세, 기타
+
+---
+
+## 4. delivery_destination (납품처)
+
+> 거래처별 납품처 관리. `customer_code`(customer_mng.customer_code)로 연결.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | varchar | NO | | PK (UUID) |
+| `customer_code` | varchar | YES | | customer_mng.customer_code 참조 |
+| `destination_code` | varchar | YES | | 납품처 코드 (채번: `DEST-XXX`) |
+| `destination_name` | varchar | YES | | 납품처명 |
+| `address` | varchar | YES | | 주소 |
+| `manager_name` | varchar | YES | | 담당자명 |
+| `phone` | varchar | YES | | 전화번호 |
+| `memo` | varchar | YES | | 메모 |
+| `is_default` | varchar | YES | | 메인 납품처 여부 (`Y`/`N`, 복수 가능) |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamp | YES | | 생성일 |
+| `updated_date` | timestamp | YES | | 수정일 |
+
+**채번 규칙**: `rule-1773627245668-7ad2ka353` (납품처코드, `destination_code` 컬럼)
+**참조 방식**: `customer_code` = `customer_mng.customer_code` (값 기반, FK 없음)
+
+---
+
+## 5. customer_item_mapping (거래처-품목 매핑)
+
+> 거래처별 품목 매핑 + 거래처 품번/품명 관리. `customer_id`(customer_mng.customer_code)로 연결.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | varchar | NO | | PK (UUID) |
+| `customer_id` | varchar | YES | | customer_mng.customer_code 참조 |
+| `item_id` | varchar | YES | | item_info.item_number 참조 |
+| `customer_item_code` | varchar | YES | | 거래처 품번 |
+| `customer_item_name` | varchar | YES | | 거래처 품명 |
+| `currency_code` | varchar | YES | | 통화 (카테고리) |
+| `current_unit_price` | varchar | YES | | 현재 단가 |
+| `discount_type` | varchar | YES | | 할인유형 (카테고리) |
+| `discount_value` | numeric | YES | | 할인값 |
+| `base_price` | numeric | YES | | 기준가 |
+| `calculated_price` | numeric | YES | | 계산 단가 |
+| `rounding_type` | varchar | YES | | 반올림 유형 |
+| `rounding_unit_value` | varchar | YES | | 반올림 단위 (카테고리) |
+| `start_date` | date | YES | | 적용 시작일 |
+| `end_date` | date | YES | | 적용 종료일 |
+| `status` | varchar | YES | | 상태 |
+| `is_active` | varchar | YES | | 활성 여부 |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamp | YES | | 생성일 |
+| `updated_date` | timestamp | YES | | 수정일 |
+
+---
+
+## 6. customer_item_prices (거래처 품목 단가)
+
+> 거래처별 품목 기간별 단가 관리. `customer_id` + `item_id`로 연결.
+
+| 컬럼명 | 타입 | NULL | 기본값 | 설명 |
+|---|---|---|---|---|
+| `id` | varchar | NO | | PK (UUID) |
+| `mapping_id` | varchar | YES | | customer_item_mapping.id 참조 |
+| `customer_id` | varchar | YES | | customer_mng.customer_code 참조 |
+| `item_id` | varchar | YES | | item_info.item_number 참조 |
+| `start_date` | date | YES | | 적용 시작일 |
+| `end_date` | date | YES | | 적용 종료일 |
+| `unit_price` | numeric | YES | | 최종 단가 |
+| `currency_code` | varchar | YES | | 통화 (카테고리) |
+| `base_price_type` | varchar | YES | | 기준유형 (카테고리) |
+| `base_price` | numeric | YES | | 기준가 |
+| `discount_type` | varchar | YES | | 할인유형 (카테고리) |
+| `discount_value` | numeric | YES | | 할인값 |
+| `rounding_type` | varchar | YES | | 반올림 유형 |
+| `rounding_unit_value` | varchar | YES | | 반올림 단위 (카테고리) |
+| `calculated_price` | numeric | YES | | 계산 단가 |
+| `supply_price` | numeric | YES | | 공급가 |
+| `vat_included_price` | numeric | YES | | 부가세 포함가 |
+| `remarks` | varchar | YES | | 비고 |
+| `company_code` | varchar | YES | | 회사 코드 |
+| `writer` | varchar | YES | | 작성자 |
+| `created_date` | timestamp | YES | | 생성일 |
+| `updated_date` | timestamp | YES | | 수정일 |
+
+---
+
+## 테이블 관계도
+
+```
+customer_mng (마스터)
+  ├── customer_contact      (customer_id = customer_mng.id)
+  ├── customer_tax_type      (customer_id = customer_mng.id)
+  ├── delivery_destination   (customer_code = customer_mng.customer_code)
+  ├── customer_item_mapping  (customer_id = customer_mng.customer_code)
+  │     └── customer_item_prices (mapping_id = customer_item_mapping.id)
+  └── customer_item_prices   (customer_id = customer_mng.customer_code)
+```
+
+> **주의**: `customer_contact`, `customer_tax_type`은 `customer_mng.id`(정수)로 연결되고,
+> `delivery_destination`, `customer_item_mapping`, `customer_item_prices`는 `customer_mng.customer_code`(문자열)로 연결됨.
+
+---
+
+## 카테고리 설정
+
+| 테이블 | 컬럼 | 값 (COMPANY_16) |
+|---|---|---|
+| `customer_mng` | `division` | 국내사업부, 해외사업부, 온라인사업부 |
+| `customer_mng` | `status` | 활성, 비활성 |
+| `customer_tax_type` | `tax_type_name` | 부가세(일반), 부가세(영세), 면세, 기타 |
+| `customer_item_prices` | `base_price_type` | 품목기준, 최종기준 등 |
+| `customer_item_prices` | `currency_code` | KRW, USD 등 |
+| `customer_item_prices` | `discount_type` | 할인금액, 할인율 등 |
+| `customer_item_prices` | `rounding_unit_value` | 절삭, 반올림, 올림 등 |
+
+---
+
+## 채번 규칙
+
+| 대상 | rule_id | 패턴 |
+|---|---|---|
+| 거래처코드 | `rule-1773627245664-rw6ny43cf` | `CUST-XXX` |
+| 납품처코드 | `rule-1773627245668-7ad2ka353` | `DEST-XXX` |
+
+채번 방식: DB max값 + 로컬 리스트 max값 중 큰 값 + 1
diff --git a/frontend/app/(main)/COMPANY_16/design/change-management/page.tsx b/frontend/app/(main)/COMPANY_16/design/change-management/page.tsx
index 00fedd3f..39f06769 100644
--- a/frontend/app/(main)/COMPANY_16/design/change-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/design/change-management/page.tsx
@@ -57,6 +57,7 @@ import {
 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 = "설계오류" | "원가절감" | "고객요청" | "공정개선" | "법규대응";
@@ -866,185 +867,52 @@ export default function DesignChangeManagementPage() {
       <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
         <div className="flex-1 overflow-auto">
           {currentTab === "ecr" ? (
-            <Table style={{ tableLayout: "fixed" }}>
-              <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">No</TableHead>
-                  {tsEcr.visibleColumns.map((col) => (
-                    <TableHead
-                      key={col.key}
-                      className={cn(
-                        col.key === "request_no" && "w-[140px]",
-                        col.key === "change_type" && "w-[90px] text-center",
-                        col.key === "status" && "w-[90px] text-center",
-                        col.key === "urgency" && "w-[60px] text-center",
-                        col.key === "target_name" && "w-[200px]",
-                        col.key === "drawing_no" && "w-[150px]",
-                        col.key === "req_dept" && "w-[80px]",
-                        col.key === "requester" && "w-[70px]",
-                        col.key === "request_date" && "w-[100px]",
-                        col.key === "ecn_no" && "w-[130px]",
-                      )}
-                      style={tsEcr.getWidth(col.key) ? { width: tsEcr.getWidth(col.key) } : undefined}
-                    >
-                      {col.label}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredEcr.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={tsEcr.visibleColumns.length + 1} 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>
-                ) : (
-                  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={() => handleRowClick(item.id)}
-                    >
-                      <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                      {tsEcr.isVisible("request_no") && <TableCell style={tsEcr.thStyle("request_no")} className="font-semibold text-primary">{item.id}</TableCell>}
-                      {tsEcr.isVisible("change_type") && (
-                      <TableCell style={tsEcr.thStyle("change_type")} 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>
-                      )}
-                      {tsEcr.isVisible("status") && (
-                      <TableCell style={tsEcr.thStyle("status")} 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>
-                      )}
-                      {tsEcr.isVisible("urgency") && (
-                      <TableCell style={tsEcr.thStyle("urgency")} className="text-center">
-                        {item.urgency === "긴급" ? (
-                          <span className="px-2 py-0.5 rounded-full text-[11px] font-medium border bg-destructive/10 text-destructive border-destructive/20">
-                            긴급
-                          </span>
-                        ) : (
-                          "-"
-                        )}
-                      </TableCell>
-                      )}
-                      {tsEcr.isVisible("target_name") && <TableCell style={tsEcr.thStyle("target_name")} className="font-medium">{item.target}</TableCell>}
-                      {tsEcr.isVisible("drawing_no") && <TableCell style={tsEcr.thStyle("drawing_no")} className="text-[13px] text-muted-foreground">{item.drawingNo}</TableCell>}
-                      {tsEcr.isVisible("req_dept") && <TableCell style={tsEcr.thStyle("req_dept")}>{item.reqDept}</TableCell>}
-                      {tsEcr.isVisible("requester") && <TableCell style={tsEcr.thStyle("requester")}>{item.requester}</TableCell>}
-                      {tsEcr.isVisible("request_date") && <TableCell style={tsEcr.thStyle("request_date")}>{item.date}</TableCell>}
-                      {tsEcr.isVisible("ecn_no") && (
-                      <TableCell style={tsEcr.thStyle("ecn_no")}>
-                        {item.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={(e) => {
-                              e.stopPropagation();
-                              navigateToLink(item.ecnNo);
-                            }}
-                          >
-                            {item.ecnNo} <ArrowRight className="w-3 h-3 inline" />
-                          </button>
-                        ) : (
-                          "-"
-                        )}
-                      </TableCell>
-                      )}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
+            <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}
+            />
           ) : (
-            <Table style={{ tableLayout: "fixed" }}>
-              <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">No</TableHead>
-                  {tsEcn.visibleColumns.map((col) => (
-                    <TableHead
-                      key={col.key}
-                      className={cn(
-                        col.key === "ecn_no" && "w-[140px]",
-                        col.key === "status" && "w-[90px] text-center",
-                        col.key === "target" && "w-[200px]",
-                        col.key === "drawing_after" && "w-[160px]",
-                        col.key === "designer" && "w-[80px]",
-                        col.key === "ecn_date" && "w-[100px]",
-                        col.key === "apply_date" && "w-[100px]",
-                        col.key === "notify_depts" && "w-[140px]",
-                        col.key === "ecr_id" && "w-[130px]",
-                      )}
-                      style={tsEcn.getWidth(col.key) ? { width: tsEcn.getWidth(col.key) } : undefined}
-                    >
-                      {col.label}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredEcn.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={tsEcn.visibleColumns.length + 1} 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={() => handleRowClick(item.id)}
-                    >
-                      <TableCell className="text-center text-muted-foreground">{idx + 1}</TableCell>
-                      {tsEcn.isVisible("ecn_no") && <TableCell style={tsEcn.thStyle("ecn_no")} className="font-semibold text-primary">{item.id}</TableCell>}
-                      {tsEcn.isVisible("status") && (
-                      <TableCell style={tsEcn.thStyle("status")} 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>
-                      )}
-                      {tsEcn.isVisible("target") && <TableCell style={tsEcn.thStyle("target")} className="font-medium">{item.target}</TableCell>}
-                      {tsEcn.isVisible("drawing_after") && <TableCell style={tsEcn.thStyle("drawing_after")} className="text-[13px] text-success font-medium">{item.drawingAfter}</TableCell>}
-                      {tsEcn.isVisible("designer") && <TableCell style={tsEcn.thStyle("designer")}>{item.designer}</TableCell>}
-                      {tsEcn.isVisible("ecn_date") && <TableCell style={tsEcn.thStyle("ecn_date")}>{item.date}</TableCell>}
-                      {tsEcn.isVisible("apply_date") && <TableCell style={tsEcn.thStyle("apply_date")}>{item.applyDate}</TableCell>}
-                      {tsEcn.isVisible("notify_depts") && <TableCell style={tsEcn.thStyle("notify_depts")} className="text-[13px] text-muted-foreground">{item.notifyDepts.join(", ")}</TableCell>}
-                      {tsEcn.isVisible("ecr_id") && (
-                      <TableCell style={tsEcn.thStyle("ecr_id")}>
-                        <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(item.ecrNo);
-                          }}
-                        >
-                          {item.ecrNo} <ArrowRight className="w-3 h-3 inline" />
-                        </button>
-                      </TableCell>
-                      )}
-                    </TableRow>
-                  ))
-                )}
-              </TableBody>
-            </Table>
+            <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>
diff --git a/frontend/app/(main)/COMPANY_16/design/design-request/page.tsx b/frontend/app/(main)/COMPANY_16/design/design-request/page.tsx
index 3e2965d7..e83c22b3 100644
--- a/frontend/app/(main)/COMPANY_16/design/design-request/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/design/design-request/page.tsx
@@ -44,6 +44,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getDesignRequestList,
   createDesignRequest,
@@ -460,95 +461,42 @@ export default function DesignRequestPage() {
 
       {/* 테이블 영역 */}
       <div className="flex-1 flex flex-col overflow-hidden border rounded-lg bg-card">
-        <div className="flex-1 overflow-auto">
-          {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 style={{ tableLayout: "fixed" }}>
-              <TableHeader className="sticky top-0 z-10">
-                <TableRow className="bg-muted hover:bg-muted">
-                  {ts.visibleColumns.map((col) => (
-                    <TableHead
-                      key={col.key}
-                      className={cn(
-                        "text-[11px]",
-                        col.key === "request_no" && "w-[100px]",
-                        col.key === "design_type" && "w-[70px] text-center",
-                        col.key === "status" && "w-[70px] text-center",
-                        col.key === "priority" && "w-[60px] text-center",
-                        col.key === "customer" && "w-[90px]",
-                        col.key === "designer" && "w-[70px]",
-                        col.key === "due_date" && "w-[85px]",
-                        col.key === "progress" && "w-[65px] text-center",
-                      )}
-                      style={ts.thStyle(col.key)}
-                    >
-                      {col.label}
-                    </TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {filteredRequests.length === 0 && (
-                  <TableRow>
-                    <TableCell colSpan={ts.visibleColumns.length} className="py-12 text-center">
-                      <div className="flex flex-col items-center gap-1 text-muted-foreground">
-                        <Inbox className="h-8 w-8" />
-                        <span className="text-sm">등록된 설계의뢰가 없어요</span>
-                      </div>
-                    </TableCell>
-                  </TableRow>
-                )}
-                {filteredRequests.map((item) => {
-                  const progress = getProgress(item.status);
+        <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 (
-                    <TableRow
-                      key={item.id}
-                      className={cn("cursor-pointer", selectedId === item.id && "bg-accent")}
-                      onClick={() => handleRowClick(item.id)}
-                    >
-                      {ts.isVisible("request_no") && <TableCell className="text-[11px] font-semibold text-primary" style={ts.thStyle("request_no")}>{item.request_no || "-"}</TableCell>}
-                      {ts.isVisible("design_type") && (
-                      <TableCell className="text-center" style={ts.thStyle("design_type")}>
-                        {item.design_type ? (
-                          <Badge className={cn("text-[9px]", TYPE_STYLES[item.design_type])}>{item.design_type}</Badge>
-                        ) : "-"}
-                      </TableCell>
-                      )}
-                      {ts.isVisible("status") && (
-                      <TableCell className="text-center" style={ts.thStyle("status")}>
-                        <Badge className={cn("text-[9px]", STATUS_STYLES[item.status])}>{item.status}</Badge>
-                      </TableCell>
-                      )}
-                      {ts.isVisible("priority") && (
-                      <TableCell className="text-center" style={ts.thStyle("priority")}>
-                        <Badge className={cn("text-[9px]", PRIORITY_STYLES[item.priority])}>{item.priority}</Badge>
-                      </TableCell>
-                      )}
-                      {ts.isVisible("target_name") && <TableCell className="text-[13px] font-medium" style={ts.thStyle("target_name")}>{item.target_name || "-"}</TableCell>}
-                      {ts.isVisible("customer") && <TableCell className="text-[11px]" style={ts.thStyle("customer")}>{item.customer || "-"}</TableCell>}
-                      {ts.isVisible("designer") && <TableCell className="text-[11px]" style={ts.thStyle("designer")}>{item.designer || "-"}</TableCell>}
-                      {ts.isVisible("due_date") && <TableCell className="text-[11px]" style={ts.thStyle("due_date")}>{item.due_date || "-"}</TableCell>}
-                      {ts.isVisible("progress") && (
-                      <TableCell style={ts.thStyle("progress")}>
-                        <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-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>
                   );
-                })}
-              </TableBody>
-            </Table>
-          )}
-        </div>
+                }
+              : undefined,
+          }))}
+          data={ts.groupData(filteredRequests)}
+          loading={loading}
+          emptyMessage="등록된 설계의뢰가 없어요"
+          selectedId={selectedId}
+          onSelect={(id) => setSelectedId(id)}
+          onRowClick={(row) => handleRowClick(row.id)}
+          draggableColumns={false}
+        />
       </div>
 
       {/* 상세 정보 다이얼로그 */}
diff --git a/frontend/app/(main)/COMPANY_16/design/my-work/page.tsx b/frontend/app/(main)/COMPANY_16/design/my-work/page.tsx
index e0092b21..8c136cb9 100644
--- a/frontend/app/(main)/COMPANY_16/design/my-work/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/design/my-work/page.tsx
@@ -76,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,
@@ -1244,66 +1245,50 @@ export default function MyWorkPage() {
                 )}
 
                 {viewMode === "list" && (
-                  <Table>
-                    <TableHeader className="sticky top-0 z-10">
-                      <TableRow className="bg-muted hover:bg-muted">
-                        <TableHead className="w-[90px] text-[11px] font-bold uppercase tracking-wide">프로젝트</TableHead>
-                        <TableHead className="text-[11px] font-bold uppercase tracking-wide">업무명</TableHead>
-                        <TableHead className="w-[65px] text-[11px] font-bold uppercase tracking-wide">유형</TableHead>
-                        <TableHead className="w-[55px] text-center text-[11px] font-bold uppercase tracking-wide">상태</TableHead>
-                        <TableHead className="w-[80px] text-[11px] font-bold uppercase tracking-wide">종료일</TableHead>
-                        <TableHead className="w-[70px] text-[11px] font-bold uppercase tracking-wide">진행률</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 transition-colors hover:bg-muted/30", isSelected && "bg-primary/5")}
-                              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-[13px] 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-[13px] 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" && (
diff --git a/frontend/app/(main)/COMPANY_16/design/project/page.tsx b/frontend/app/(main)/COMPANY_16/design/project/page.tsx
index 1aaafc9f..7e66b696 100644
--- a/frontend/app/(main)/COMPANY_16/design/project/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/design/project/page.tsx
@@ -63,6 +63,7 @@ import {
 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 = "진행중" | "계획" | "보류" | "완료";
@@ -728,133 +729,63 @@ export default function DesignProjectPage() {
               </div>
 
               <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="sticky top-0 z-10">
-                    <TableRow className="bg-muted hover:bg-muted">
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead
-                          key={col.key}
-                          className={cn(
-                            "text-[11px] uppercase tracking-wide",
-                            col.key === "status" && "w-[80px] text-center",
-                            col.key === "project_no" && "w-[160px]",
-                            col.key === "name" && "w-[200px]",
-                            col.key === "pm" && "w-[70px]",
-                            col.key === "customer" && "w-[80px]",
-                            col.key === "start_date" && "w-[90px]",
-                            col.key === "end_date" && "w-[90px]",
-                            col.key === "progress" && "w-[100px] text-center",
-                            col.key === "source_no" && "w-[90px]",
-                          )}
-                          style={ts.thStyle(col.key)}
-                        >
-                          {col.label}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading ? (
-                      <TableRow>
-                        <TableCell colSpan={ts.visibleColumns.length} 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={ts.visibleColumns.length} className="h-32 text-center">
-                          <div className="flex flex-col items-center gap-2 py-6 mx-auto max-w-xs border border-dashed border-border rounded-lg">
-                            <Rocket className="w-10 h-10 text-muted-foreground/30" />
-                            <span className="text-sm text-muted-foreground">조건에 맞는 프로젝트가 없어요</span>
-                          </div>
-                        </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 border-l-[3px]",
-                              selectedId === p.id
-                                ? "bg-primary/5 border-l-primary"
-                                : "border-l-transparent",
-                              depth === 1 && "bg-muted/30",
-                              depth >= 2 && "bg-muted/15"
-                            )}
-                            onClick={() => {
-                              setSelectedId(p.id);
-                              setDetailTab("wbs");
-                              fetchTaskDetails(p.id);
-                            }}
-                          >
-                            {ts.isVisible("project_no") && (
-                            <TableCell style={ts.thStyle("project_no")}>
-                              <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-primary/80" : "text-primary/60")}>
-                                  {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>
-                            )}
-                            {ts.isVisible("status") && (
-                            <TableCell className="text-center" style={ts.thStyle("status")}>
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium border", getStatusColor(p.status))}>
-                                {p.status}
-                              </span>
-                            </TableCell>
-                            )}
-                            {ts.isVisible("name") && (
-                            <TableCell className="font-medium text-sm" style={ts.thStyle("name")}>
-                              {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>
-                            )}
-                            {ts.isVisible("pm") && <TableCell className="text-[13px]" style={ts.thStyle("pm")}>{p.pm}</TableCell>}
-                            {ts.isVisible("customer") && <TableCell className="text-[13px]" style={ts.thStyle("customer")}>{p.customer}</TableCell>}
-                            {ts.isVisible("start_date") && <TableCell className="text-[13px] text-muted-foreground" style={ts.thStyle("start_date")}>{p.startDate}</TableCell>}
-                            {ts.isVisible("end_date") && <TableCell className="text-[13px] text-muted-foreground" style={ts.thStyle("end_date")}>{p.endDate}</TableCell>}
-                            {ts.isVisible("progress") && (
-                            <TableCell style={ts.thStyle("progress")}>
-                              <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>
-                            )}
-                            {ts.isVisible("source_no") && <TableCell className="text-[13px] text-muted-foreground" style={ts.thStyle("source_no")}>{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>
diff --git a/frontend/app/(main)/COMPANY_16/design/task-management/page.tsx b/frontend/app/(main)/COMPANY_16/design/task-management/page.tsx
index de76142f..f5603e46 100644
--- a/frontend/app/(main)/COMPANY_16/design/task-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/design/task-management/page.tsx
@@ -57,6 +57,7 @@ import {
   Users,
   Settings2,
 } from "lucide-react";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { toast } from "sonner";
 import {
@@ -749,108 +750,49 @@ export default function DesignTaskManagementPage() {
                   <Settings2 className="h-4 w-4" />
                 </Button>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="sticky top-0 z-10">
-                    <TableRow className="bg-muted hover:bg-muted">
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead
-                          key={col.key}
-                          className={cn(
-                            "text-[11px] uppercase tracking-wide",
-                            col.key === "source_type" && "w-[60px] text-center",
-                            col.key === "request_no" && "w-[130px]",
-                            col.key === "status" && "w-[90px] text-center",
-                            col.key === "priority" && "w-[80px] text-center",
-                            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]",
-                          )}
-                          style={ts.thStyle(col.key)}
-                        >
-                          {col.label}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading && allTasks.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={ts.visibleColumns.length}>
-                          <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={ts.visibleColumns.length}>
-                          <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 border-l-[3px]",
-                            selectedTaskId === item.dbId
-                              ? "bg-primary/5 border-l-primary"
-                              : item.status === "신규접수"
-                              ? "bg-primary/5 border-l-primary/40"
-                              : "border-l-transparent"
-                          )}
-                          onClick={() => handleSelectTask(item.dbId)}
-                        >
-                          {ts.isVisible("source_type") && (
-                          <TableCell className="text-center" style={ts.thStyle("source_type")}>
-                            <Badge variant="outline" className={cn("text-[10px] font-bold", getSourceBadge(item.sourceType))}>
-                              {item.sourceType === "dr" ? "DR" : "ECR"}
-                            </Badge>
-                          </TableCell>
-                          )}
-                          {ts.isVisible("request_no") && (
-                          <TableCell className={cn("text-[13px] font-semibold", item.sourceType === "dr" ? "text-primary" : "text-secondary-foreground")} style={ts.thStyle("request_no")}>
-                            {item.id}
-                          </TableCell>
-                          )}
-                          {ts.isVisible("status") && (
-                          <TableCell className="text-center" style={ts.thStyle("status")}>
-                            <Badge variant="outline" className={cn("text-[10px]", getStatusVariant(item.status))}>
-                              {item.status}
-                            </Badge>
-                          </TableCell>
-                          )}
-                          {ts.isVisible("priority") && (
-                          <TableCell className="text-center" style={ts.thStyle("priority")}>
-                            <Badge variant="outline" className={cn("text-[10px]", getPriorityVariant(item.priority))}>
-                              {item.priority}
-                            </Badge>
-                          </TableCell>
-                          )}
-                          {ts.isVisible("target_name") && <TableCell className="max-w-[200px] truncate text-[13px] font-medium" style={ts.thStyle("target_name")}>{item.targetName}</TableCell>}
-                          {ts.isVisible("req_dept") && <TableCell className="text-[13px]" style={ts.thStyle("req_dept")}>{item.reqDept}</TableCell>}
-                          {ts.isVisible("requester") && <TableCell className="text-[13px]" style={ts.thStyle("requester")}>{item.requester}</TableCell>}
-                          {ts.isVisible("request_date") && <TableCell className="text-[13px]" style={ts.thStyle("request_date")}>{item.date}</TableCell>}
-                          {ts.isVisible("due_date") && <TableCell className="text-[13px]" style={ts.thStyle("due_date")}>{item.dueDate}</TableCell>}
-                          {ts.isVisible("designer") && (
-                          <TableCell className="text-[13px]" style={ts.thStyle("designer")}>
-                            {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>
 
diff --git a/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx b/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx
index 7ec2b68c..eeb63844 100644
--- a/frontend/app/(main)/COMPANY_16/equipment/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/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";
@@ -34,6 +34,7 @@ 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";
@@ -140,6 +141,17 @@ export default function EquipmentInfoPage() {
     return catOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  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 fetchEquipments = useCallback(async () => {
     setEquipLoading(true);
@@ -469,48 +481,18 @@ export default function EquipmentInfoPage() {
                   </Button>
                 </div>
               </div>
-              <div className="flex-1 overflow-auto">
-                {equipLoading ? (
-                  <div className="flex items-center justify-center py-12">
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : equipments.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>
-                ) : (
-                  <Table noWrapper style={{ tableLayout: "fixed" }}>
-                    <thead className="sticky top-0 z-10 bg-card">
-                      <TableRow>
-                        {ts.isVisible("equipment_code") && <TableHead style={ts.thStyle("equipment_code")} className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">설비코드</TableHead>}
-                        {ts.isVisible("equipment_name") && <TableHead style={ts.thStyle("equipment_name")} className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">설비명</TableHead>}
-                        {ts.isVisible("equipment_type") && <TableHead style={ts.thStyle("equipment_type")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">설비유형</TableHead>}
-                        {ts.isVisible("manufacturer") && <TableHead style={ts.thStyle("manufacturer")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">제조사</TableHead>}
-                        {ts.isVisible("installation_location") && <TableHead style={ts.thStyle("installation_location")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">설치장소</TableHead>}
-                        {ts.isVisible("operation_status") && <TableHead style={ts.thStyle("operation_status")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">가동상태</TableHead>}
-                      </TableRow>
-                    </thead>
-                    <TableBody>
-                      {equipments.map((equip) => (
-                        <TableRow
-                          key={equip.id}
-                          className={cn("cursor-pointer", selectedEquipId === equip.id && "border-l-2 border-l-primary bg-primary/[0.08]")}
-                          onClick={() => setSelectedEquipId(equip.id)}
-                          onDoubleClick={openEquipEdit}
-                        >
-                          {ts.isVisible("equipment_code") && <TableCell style={ts.thStyle("equipment_code")} className="text-[13px] font-mono">{equip.equipment_code}</TableCell>}
-                          {ts.isVisible("equipment_name") && <TableCell style={ts.thStyle("equipment_name")} className="text-sm max-w-[150px] truncate" title={equip.equipment_name}>{equip.equipment_name || "-"}</TableCell>}
-                          {ts.isVisible("equipment_type") && <TableCell style={ts.thStyle("equipment_type")} className="text-[13px]">{equip.equipment_type || "-"}</TableCell>}
-                          {ts.isVisible("manufacturer") && <TableCell style={ts.thStyle("manufacturer")} className="text-[13px]">{equip.manufacturer || "-"}</TableCell>}
-                          {ts.isVisible("installation_location") && <TableCell style={ts.thStyle("installation_location")} className="text-[13px]">{equip.installation_location || "-"}</TableCell>}
-                          {ts.isVisible("operation_status") && <TableCell style={ts.thStyle("operation_status")} className="text-[13px]">{equip.operation_status || "-"}</TableCell>}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                )}
-              </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>
 
diff --git a/frontend/app/(main)/COMPANY_16/equipment/plc-settings/page.tsx b/frontend/app/(main)/COMPANY_16/equipment/plc-settings/page.tsx
index 5a3cd862..4e94d293 100644
--- a/frontend/app/(main)/COMPANY_16/equipment/plc-settings/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/equipment/plc-settings/page.tsx
@@ -19,6 +19,7 @@ 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";
 
@@ -285,46 +286,25 @@ export default function PlcSettingsPage() {
               </div>
             </div>
             <div className="border rounded-lg overflow-hidden">
-              <Table style={{ tableLayout: "fixed" }}>
-                <TableHeader className="sticky top-0 z-10">
-                  <TableRow className="bg-muted hover:bg-muted">
-                    <TableHead className="w-10">
-                      <Checkbox
-                        checked={datatypes.length > 0 && dtChecked.length === datatypes.length}
-                        onCheckedChange={(v) => setDtChecked(v ? datatypes.map(r => r.id) : [])}
-                      />
-                    </TableHead>
-                    {ts.visibleColumns.map((col) => (
-                      <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{col.label}</TableHead>
-                    ))}
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {dtLoading ? (
-                    <TableRow><TableCell colSpan={ts.visibleColumns.length + 1} className="text-center py-8"><Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                  ) : datatypes.length === 0 ? (
-                    <TableRow><TableCell colSpan={ts.visibleColumns.length + 1} className="text-center py-10 text-muted-foreground"><Inbox className="w-8 h-8 mx-auto mb-2 opacity-40" /><p className="text-sm">등록된 PLC 데이터타입이 없어요</p></TableCell></TableRow>
-                  ) : datatypes.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      className={cn("cursor-pointer", dtChecked.includes(row.id) && "bg-primary/5")}
-                      onClick={() => setDtChecked(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id])}
-                      onDoubleClick={() => openDtEdit(row)}
-                    >
-                      <TableCell onClick={(e) => e.stopPropagation()}>
-                        <Checkbox checked={dtChecked.includes(row.id)} onCheckedChange={(v) => setDtChecked(prev => v ? [...prev, row.id] : prev.filter(id => id !== row.id))} />
-                      </TableCell>
-                      {ts.visibleColumns.map((col) => (
-                        <TableCell key={col.key} style={ts.thStyle(col.key)} className={col.key === "is_active" ? "text-center" : ""}>
-                          {col.key === "is_active"
-                            ? <Badge variant={row.is_active ? "default" : "secondary"} className="text-xs">{row.is_active ? "사용" : "미사용"}</Badge>
-                            : row[col.key] ?? ""}
-                        </TableCell>
-                      ))}
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+              <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>
 
@@ -360,52 +340,26 @@ export default function PlcSettingsPage() {
               </div>
             </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-10">
-                      <Checkbox
-                        checked={configs.length > 0 && cfgChecked.length === configs.length}
-                        onCheckedChange={(v) => setCfgChecked(v ? configs.map(r => r.id) : [])}
-                      />
-                    </TableHead>
-                    <TableHead className="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-[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>
-                    <TableHead className="w-[90px] 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">스케줄(Cron)</TableHead>
-                    <TableHead className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">사용여부</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {cfgLoading ? (
-                    <TableRow><TableCell colSpan={8} className="text-center py-8"><Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                  ) : configs.length === 0 ? (
-                    <TableRow><TableCell colSpan={8} className="text-center py-10 text-muted-foreground"><Inbox className="w-8 h-8 mx-auto mb-2 opacity-40" /><p className="text-sm">등록된 수집 설정이 없어요</p></TableCell></TableRow>
-                  ) : configs.map((row) => (
-                    <TableRow
-                      key={row.id}
-                      className={cn("cursor-pointer", cfgChecked.includes(row.id) && "bg-primary/5")}
-                      onClick={() => setCfgChecked(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id])}
-                      onDoubleClick={() => openCfgEdit(row)}
-                    >
-                      <TableCell onClick={(e) => e.stopPropagation()}>
-                        <Checkbox checked={cfgChecked.includes(row.id)} onCheckedChange={(v) => setCfgChecked(prev => v ? [...prev, row.id] : prev.filter(id => id !== row.id))} />
-                      </TableCell>
-                      <TableCell>{row.config_name}</TableCell>
-                      <TableCell>{row.source_connection_id}</TableCell>
-                      <TableCell>{row.source_table}</TableCell>
-                      <TableCell>{row.target_table}</TableCell>
-                      <TableCell>{row.collection_type}</TableCell>
-                      <TableCell className="font-mono text-[13px]">{row.schedule_cron}</TableCell>
-                      <TableCell className="text-center">
-                        <Badge variant={row.is_active ? "default" : "secondary"} className="text-xs">{row.is_active ? "사용" : "미사용"}</Badge>
-                      </TableCell>
-                    </TableRow>
-                  ))}
-                </TableBody>
-              </Table>
+              <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>
diff --git a/frontend/app/(main)/COMPANY_16/logistics/info/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/info/page.tsx
index 1e60f516..543dd3dd 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/info/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/info/page.tsx
@@ -54,6 +54,7 @@ import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numbering
 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";
@@ -822,95 +823,25 @@ export default function LogisticsInfoPage() {
 
               {/* 테이블 영역 */}
               <div className="flex-1 overflow-auto">
-                {tabLoading[tab.key] ? (
-                  <div className="flex h-40 items-center justify-center gap-2 text-muted-foreground">
-                    <Loader2 className="h-4 w-4 animate-spin" />
-                    <span className="text-sm">불러오는 중...</span>
-                  </div>
-                ) : displayData.length === 0 ? (
-                  <div className="flex h-40 flex-col items-center justify-center gap-2 text-muted-foreground">
-                    <div className="flex h-14 w-14 items-center justify-center rounded-full bg-muted/50">
-                      <Inbox className="h-6 w-6 opacity-40" />
-                    </div>
-                    <span className="text-sm">등록된 {tab.label} 정보가 없어요</span>
-                    <span className="text-xs text-muted-foreground/60">
-                      등록 버튼을 눌러 새 항목을 추가해주세요
-                    </span>
-                  </div>
-                ) : (
-                  <Table style={{ tableLayout: "fixed" }}>
-                    <TableHeader className="sticky top-0 z-10">
-                      <TableRow className="bg-muted hover:bg-muted">
-                        <TableHead className="w-[40px] p-2">
-                          <Checkbox
-                            checked={isAllChecked}
-                            onCheckedChange={(checked) =>
-                              toggleAllCheck(tab.key, !!checked)
-                            }
-                          />
-                        </TableHead>
-                        {getVisibleColumns(tab.key).map((col) => (
-                          <TableHead
-                            key={col.key}
-                            className={cn(
-                              "text-[11px] font-bold uppercase tracking-wide text-muted-foreground",
-                              col.align === "right" && "text-right",
-                              col.align === "center" && "text-center"
-                            )}
-                            style={tsMap[tab.key].thStyle(col.key)}
-                          >
-                            {col.label}
-                          </TableHead>
-                        ))}
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {displayData.map((row: any, idx: number) => {
-                        const rowId = String(row.id);
-                        const isChecked = tabChecked[tab.key].includes(rowId);
-                        return (
-                          <TableRow
-                            key={row.id ?? idx}
-                            className={cn(
-                              "cursor-pointer transition-colors hover:bg-accent/50",
-                              isChecked && "bg-primary/5 hover:bg-primary/10"
-                            )}
-                            onClick={() => toggleRowCheck(tab.key, rowId)}
-                            onDoubleClick={() => handleOpenEdit(row)}
-                          >
-                            <TableCell className="w-[40px] p-2">
-                              <Checkbox
-                                checked={isChecked}
-                                onCheckedChange={() => toggleRowCheck(tab.key, rowId)}
-                                onClick={(e) => e.stopPropagation()}
-                              />
-                            </TableCell>
-                            {getVisibleColumns(tab.key).map((col) => {
-                              const val = row[col.key];
-                              const display =
-                                col.formatNumber && val != null && val !== ""
-                                  ? Number(val).toLocaleString()
-                                  : val ?? "";
-                              return (
-                                <TableCell
-                                  key={col.key}
-                                  className={cn(
-                                    "max-w-[240px] truncate p-2 text-sm",
-                                    col.align === "right" && "text-right",
-                                    col.align === "center" && "text-center"
-                                  )}
-                                  style={tsMap[tab.key].thStyle(col.key)}
-                                >
-                                  {display}
-                                </TableCell>
-                              );
-                            })}
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                )}
+                <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>
           );
diff --git a/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
index 5562ef65..7d2a96c6 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/inventory/page.tsx
@@ -59,6 +59,7 @@ 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";
 
@@ -312,6 +313,45 @@ export default function InventoryStatusPage() {
     }
   };
 
+  // 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) {
@@ -377,86 +417,19 @@ export default function InventoryStatusPage() {
               </div>
             </div>
 
-            <div className="flex-1 overflow-auto">
-              {stockLoading ? (
-                <div className="flex items-center justify-center h-32">
-                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                </div>
-              ) : stockItems.length === 0 ? (
-                <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
-                  등록된 재고가 없어요
-                </div>
-              ) : (
-                <Table style={{ tableLayout: "fixed" }}>
-                  <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>
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead
-                          key={col.key}
-                          style={ts.thStyle(col.key)}
-                          className={cn(col.align === "right" && "text-right")}
-                        >
-                          {col.label}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {stockItems.map((item, idx) => (
-                      <TableRow
-                        key={item.id}
-                        className={cn(
-                          "cursor-pointer text-xs",
-                          selectedStockId === item.id && "bg-primary/10",
-                          item._isLow && "bg-destructive/5"
-                        )}
-                        onClick={() => setSelectedStockId(item.id)}
-                      >
-                        <TableCell className="text-center text-muted-foreground">
-                          {idx + 1}
-                        </TableCell>
-                        {ts.visibleColumns.map((col) => {
-                          if (col.key === "current_qty") {
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-right font-mono">
-                                <span className={cn(item._isLow && "text-destructive font-bold")}>
-                                  {Number(item.current_qty || 0).toLocaleString()}
-                                </span>
-                                {item._isLow && (
-                                  <AlertTriangle className="inline h-3 w-3 text-destructive ml-1" />
-                                )}
-                              </TableCell>
-                            );
-                          }
-                          if (col.key === "safety_qty") {
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-right font-mono">
-                                {Number(item.safety_qty || 0).toLocaleString()}
-                              </TableCell>
-                            );
-                          }
-                          if (col.key === "status") {
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)}>
-                                <Badge variant={getStatusVariant(item.status)} className="text-[10px]">
-                                  {item.status}
-                                </Badge>
-                              </TableCell>
-                            );
-                          }
-                          return (
-                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="truncate max-w-[150px]">
-                              {item[col.key] ?? ""}
-                            </TableCell>
-                          );
-                        })}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              )}
-            </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>
 
diff --git a/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
index 212f3903..49e3f6cf 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/outbound/page.tsx
@@ -47,6 +47,7 @@ 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";
 // API: /outbound/*
 import {
   getOutboundList,
@@ -643,139 +644,40 @@ export default function OutboundPage() {
           </div>
         </div>
 
-        <div className="flex-1 overflow-auto">
-          <Table style={{ tableLayout: "fixed" }}>
-            <TableHeader className="sticky top-0 z-10">
-              <TableRow className="bg-muted hover:bg-muted">
-                <TableHead className="w-[40px] text-center text-[11px] uppercase tracking-wide">
-                  <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
-                  />
-                </TableHead>
-                {ts.isVisible("outbound_number") && <TableHead style={ts.thStyle("outbound_number")} className="w-[130px] text-[11px] uppercase tracking-wide">출고번호</TableHead>}
-                {ts.isVisible("outbound_type") && <TableHead style={ts.thStyle("outbound_type")} className="w-[90px] text-[11px] uppercase tracking-wide">출고유형</TableHead>}
-                {ts.isVisible("outbound_date") && <TableHead style={ts.thStyle("outbound_date")} className="w-[100px] text-[11px] uppercase tracking-wide">출고일</TableHead>}
-                {ts.isVisible("reference_number") && <TableHead style={ts.thStyle("reference_number")} className="w-[120px] text-[11px] uppercase tracking-wide">참조번호</TableHead>}
-                {ts.isVisible("source_type") && <TableHead style={ts.thStyle("source_type")} className="w-[80px] text-[11px] uppercase tracking-wide">데이터출처</TableHead>}
-                {ts.isVisible("customer_name") && <TableHead style={ts.thStyle("customer_name")} className="w-[120px] text-[11px] uppercase tracking-wide">거래처</TableHead>}
-                {ts.isVisible("item_number") && <TableHead style={ts.thStyle("item_number")} className="w-[100px] text-[11px] uppercase tracking-wide">품목코드</TableHead>}
-                {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="min-w-[150px] text-[11px] uppercase tracking-wide">품목명</TableHead>}
-                {ts.isVisible("spec") && <TableHead style={ts.thStyle("spec")} className="w-[80px] text-[11px] uppercase tracking-wide">규격</TableHead>}
-                {ts.isVisible("outbound_qty") && <TableHead style={ts.thStyle("outbound_qty")} className="w-[80px] text-right text-[11px] uppercase tracking-wide">출고수량</TableHead>}
-                {ts.isVisible("unit_price") && <TableHead style={ts.thStyle("unit_price")} className="w-[90px] text-right text-[11px] uppercase tracking-wide">단가</TableHead>}
-                {ts.isVisible("total_amount") && <TableHead style={ts.thStyle("total_amount")} className="w-[100px] text-right text-[11px] uppercase tracking-wide">금액</TableHead>}
-                {ts.isVisible("warehouse_name") && <TableHead style={ts.thStyle("warehouse_name")} className="w-[100px] text-[11px] uppercase tracking-wide">창고</TableHead>}
-                {ts.isVisible("outbound_status") && <TableHead style={ts.thStyle("outbound_status")} className="w-[90px] text-center text-[11px] uppercase tracking-wide">출고상태</TableHead>}
-                {ts.isVisible("remark") && <TableHead style={ts.thStyle("remark")} className="w-[100px] text-[11px] uppercase tracking-wide">비고</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>
-                </TableRow>
-              ) : data.length === 0 ? (
-                <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="h-40 text-center"
-                  >
-                    <div className="mx-auto flex max-w-xs flex-col items-center gap-2 rounded-lg border border-dashed border-border p-8">
-                      <Inbox className="h-10 w-10 text-muted-foreground/30" />
-                      <p className="text-sm text-muted-foreground">등록된 출고 내역이 없어요</p>
-                      <p className="text-xs text-muted-foreground/70">
-                        출고 등록 버튼을 클릭하여 출고를 추가해주세요
-                      </p>
-                    </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)}
-                    onDoubleClick={() => openEditModal(row)}
-                  >
-                    <TableCell
-                      className="text-center"
-                      onClick={(e) => e.stopPropagation()}
-                    >
-                      <Checkbox
-                        checked={checkedIds.includes(row.id)}
-                        onCheckedChange={() => toggleCheck(row.id)}
-                      />
-                    </TableCell>
-                    {ts.isVisible("outbound_number") && <TableCell style={ts.thStyle("outbound_number")} className="max-w-[130px] truncate font-medium" title={row.outbound_number}>
-                      {row.outbound_number}
-                    </TableCell>}
-                    {ts.isVisible("outbound_type") && <TableCell style={ts.thStyle("outbound_type")}>
-                      <Badge
-                        variant="outline"
-                        className={cn("text-[11px]", getTypeColor(row.outbound_type))}
-                      >
-                        {row.outbound_type || "-"}
-                      </Badge>
-                    </TableCell>}
-                    {ts.isVisible("outbound_date") && <TableCell style={ts.thStyle("outbound_date")} className="text-[13px]">
-                      {row.outbound_date
-                        ? new Date(row.outbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>}
-                    {ts.isVisible("reference_number") && <TableCell style={ts.thStyle("reference_number")} className="max-w-[120px] truncate text-[13px]" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>}
-                    {ts.isVisible("source_type") && <TableCell style={ts.thStyle("source_type")} className="text-[13px]">
-                      {row.source_type
-                        ? SOURCE_TYPE_LABEL[row.source_type] || row.source_type
-                        : "-"}
-                    </TableCell>}
-                    {ts.isVisible("customer_name") && <TableCell style={ts.thStyle("customer_name")} className="max-w-[120px] truncate text-[13px]" title={row.customer_name || "-"}>
-                      {row.customer_name || "-"}
-                    </TableCell>}
-                    {ts.isVisible("item_number") && <TableCell style={ts.thStyle("item_number")} className="max-w-[130px] truncate text-[13px]" title={row.item_code || "-"}>
-                      {row.item_code || "-"}
-                    </TableCell>}
-                    {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="max-w-[150px] truncate text-[13px]" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>}
-                    {ts.isVisible("spec") && <TableCell style={ts.thStyle("spec")} className="max-w-[100px] truncate text-[13px]" title={row.specification || "-"}>{row.specification || "-"}</TableCell>}
-                    {ts.isVisible("outbound_qty") && <TableCell style={ts.thStyle("outbound_qty")} className="text-right font-mono text-[13px] font-semibold">
-                      {Number(row.outbound_qty || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("unit_price") && <TableCell style={ts.thStyle("unit_price")} className="text-right font-mono text-[13px]">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("total_amount") && <TableCell style={ts.thStyle("total_amount")} className="text-right font-mono text-[13px] font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("warehouse_name") && <TableCell style={ts.thStyle("warehouse_name")} className="text-[13px]">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>}
-                    {ts.isVisible("outbound_status") && <TableCell style={ts.thStyle("outbound_status")} className="text-center">
-                      <Badge
-                        variant="outline"
-                        className={cn(
-                          "text-[11px]",
-                          getStatusColor(row.outbound_status)
-                        )}
-                      >
-                        {row.outbound_status || "-"}
-                      </Badge>
-                    </TableCell>}
-                    {ts.isVisible("remark") && <TableCell style={ts.thStyle("remark")} className="max-w-[120px] truncate text-[13px]" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>}
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
+        <EDataTable
+          columns={[
+            { key: "outbound_number", label: "출고번호", width: "w-[130px]" },
+            { key: "outbound_type", label: "출고유형", width: "w-[90px]", render: (v) => (
+              <Badge variant="outline" className={cn("text-[11px]", getTypeColor(v))}>{v || "-"}</Badge>
+            )},
+            { key: "outbound_date", label: "출고일", width: "w-[100px]", render: (v) => v ? new Date(v).toLocaleDateString("ko-KR") : "-" },
+            { key: "reference_number", label: "참조번호", width: "w-[120px]" },
+            { key: "source_type", label: "데이터출처", width: "w-[80px]", render: (v) => v ? SOURCE_TYPE_LABEL[v] || v : "-" },
+            { key: "customer_name", label: "거래처", width: "w-[120px]" },
+            { key: "item_code", label: "품목코드", width: "w-[100px]" },
+            { key: "item_name", label: "품목명", minWidth: "min-w-[150px]" },
+            { key: "specification", label: "규격", width: "w-[80px]" },
+            { key: "outbound_qty", label: "출고수량", width: "w-[80px]", align: "right", formatNumber: true },
+            { key: "unit_price", label: "단가", width: "w-[90px]", align: "right", formatNumber: true },
+            { key: "total_amount", label: "금액", width: "w-[100px]", align: "right", formatNumber: true },
+            { key: "warehouse_name", label: "창고", width: "w-[100px]", render: (_v, row) => row.warehouse_name || row.warehouse_code || "-" },
+            { key: "outbound_status", label: "출고상태", width: "w-[90px]", align: "center", render: (v) => (
+              <Badge variant="outline" className={cn("text-[11px]", getStatusColor(v))}>{v || "-"}</Badge>
+            )},
+            { key: "memo", label: "비고", width: "w-[100px]" },
+          ] as EDataTableColumn<OutboundItem>[]}
+          data={ts.groupData(data)}
+          rowKey={(row) => row.id}
+          loading={loading}
+          emptyMessage="등록된 출고 내역이 없어요"
+          showCheckbox
+          checkedIds={checkedIds}
+          onCheckedChange={setCheckedIds}
+          onRowDoubleClick={(row) => openEditModal(row)}
+          showPagination
+          draggableColumns
+          columnOrderKey="c16-outbound"
+        />
       </div>
 
       {/* 출고 등록 모달 */}
diff --git a/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
index 1a04aa7f..5d4d5787 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/packaging/page.tsx
@@ -30,6 +30,7 @@ import {
 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: "품목코드" },
@@ -458,58 +459,32 @@ export default function PackagingPage() {
         <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")}>
-            <Table style={{ tableLayout: "fixed" }}>
-              <TableHeader className="sticky top-0 z-10">
-                <TableRow className="bg-muted hover:bg-muted">
-                  {ts.isVisible("pkg_code") && <TableHead style={ts.thStyle("pkg_code")} className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>}
-                  {ts.isVisible("pkg_name") && <TableHead style={ts.thStyle("pkg_name")} className="p-2 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">포장명</TableHead>}
-                  {ts.isVisible("pkg_type") && <TableHead style={ts.thStyle("pkg_type")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>}
-                  {ts.isVisible("size") && <TableHead style={ts.thStyle("size")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">크기(mm)</TableHead>}
-                  {ts.isVisible("max_weight") && <TableHead style={ts.thStyle("max_weight")} className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">최대중량</TableHead>}
-                  {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {pkgLoading ? (
-                  <TableRow>
-                    <TableCell colSpan={6} className="h-32 text-center">
-                      <Loader2 className="mx-auto h-5 w-5 animate-spin text-muted-foreground" />
-                    </TableCell>
-                  </TableRow>
-                ) : filteredPkgUnits.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>
-                ) : filteredPkgUnits.map((p) => (
-                  <TableRow
-                    key={p.id}
-                    className={cn(
-                      "cursor-pointer text-xs transition-colors",
-                      selectedPkg?.id === p.id ? "bg-primary/5" : "hover:bg-muted/50"
-                    )}
-                    onClick={() => selectPkg(p)}
-                  >
-                    {ts.isVisible("pkg_code") && <TableCell style={ts.thStyle("pkg_code")} className="p-2 font-medium">{p.pkg_code}</TableCell>}
-                    {ts.isVisible("pkg_name") && <TableCell style={ts.thStyle("pkg_name")} className="p-2">{p.pkg_name}</TableCell>}
-                    {ts.isVisible("pkg_type") && <TableCell style={ts.thStyle("pkg_type")} className="p-2">{PKG_TYPE_LABEL[p.pkg_type] || p.pkg_type || "-"}</TableCell>}
-                    {ts.isVisible("size") && <TableCell style={ts.thStyle("size")} className="p-2 text-[10px] tabular-nums">{fmtSize(p.width_mm, p.length_mm, p.height_mm)}</TableCell>}
-                    {ts.isVisible("max_weight") && <TableCell style={ts.thStyle("max_weight")} className="p-2 text-right">{Number(p.max_load_kg || 0) > 0 ? `${p.max_load_kg}kg` : "-"}</TableCell>}
-                    {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="p-2 text-center">
-                      <span className={cn("rounded px-1.5 py-0.5 text-[10px] font-medium", getStatusColor(p.status))}>
-                        {STATUS_LABEL[p.status] || p.status}
-                      </span>
-                    </TableCell>}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
+            <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>[]}
+              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>
 
           {/* 매칭 품목 서브패널 */}
diff --git a/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
index 0287cb14..42590754 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/receiving/page.tsx
@@ -53,6 +53,7 @@ import { apiClient } from "@/lib/api/client";
 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";
 // API: /receiving/*
 import {
   getReceivingList,
@@ -574,135 +575,39 @@ export default function ReceivingPage() {
           </Button>
         </div>
 
-        <div className="flex-1 overflow-auto">
-          <Table style={{ tableLayout: "fixed" }}>
-            <TableHeader className="sticky top-0 z-10">
-              <TableRow className="bg-muted hover:bg-muted">
-                <TableHead className="w-[40px] text-center">
-                  <Checkbox
-                    checked={allChecked}
-                    onCheckedChange={toggleCheckAll}
-                  />
-                </TableHead>
-                {ts.isVisible("inbound_number") && <TableHead style={ts.thStyle("inbound_number")} className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고번호</TableHead>}
-                {ts.isVisible("inbound_type") && <TableHead style={ts.thStyle("inbound_type")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고유형</TableHead>}
-                {ts.isVisible("inbound_date") && <TableHead style={ts.thStyle("inbound_date")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고일</TableHead>}
-                {ts.isVisible("reference_number") && <TableHead style={ts.thStyle("reference_number")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">참조번호</TableHead>}
-                {ts.isVisible("source_type") && <TableHead style={ts.thStyle("source_type")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">데이터출처</TableHead>}
-                {ts.isVisible("supplier_name") && <TableHead style={ts.thStyle("supplier_name")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급처</TableHead>}
-                {ts.isVisible("item_number") && <TableHead style={ts.thStyle("item_number")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>}
-                {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="min-w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>}
-                {ts.isVisible("spec") && <TableHead style={ts.thStyle("spec")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-                {ts.isVisible("inbound_qty") && <TableHead style={ts.thStyle("inbound_qty")} className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>}
-                {ts.isVisible("unit_price") && <TableHead style={ts.thStyle("unit_price")} className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>}
-                {ts.isVisible("total_amount") && <TableHead style={ts.thStyle("total_amount")} className="w-[100px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>}
-                {ts.isVisible("warehouse_name") && <TableHead style={ts.thStyle("warehouse_name")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">창고</TableHead>}
-                {ts.isVisible("inbound_status") && <TableHead style={ts.thStyle("inbound_status")} className="w-[90px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고상태</TableHead>}
-                {ts.isVisible("remark") && <TableHead style={ts.thStyle("remark")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</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>
-                </TableRow>
-              ) : data.length === 0 ? (
-                <TableRow>
-                  <TableCell
-                    colSpan={16}
-                    className="h-40 text-center"
-                  >
-                    <div className="flex flex-col items-center gap-1.5 text-muted-foreground">
-                      <Inbox className="h-10 w-10 opacity-30" />
-                      <p className="text-sm font-medium">등록된 입고 내역이 없어요</p>
-                      <p className="text-xs text-muted-foreground/70">
-                        입고 등록 버튼을 클릭하여 입고를 추가해 보세요
-                      </p>
-                    </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>
-                    {ts.isVisible("inbound_number") && <TableCell style={ts.thStyle("inbound_number")} className="max-w-[130px] truncate font-medium" title={row.inbound_number}>
-                      {row.inbound_number}
-                    </TableCell>}
-                    {ts.isVisible("inbound_type") && <TableCell style={ts.thStyle("inbound_type")}>
-                      <Badge
-                        variant={getTypeVariant(row.inbound_type)}
-                        className="text-[11px]"
-                      >
-                        {row.inbound_type || "-"}
-                      </Badge>
-                    </TableCell>}
-                    {ts.isVisible("inbound_date") && <TableCell style={ts.thStyle("inbound_date")} className="text-[13px]">
-                      {row.inbound_date
-                        ? new Date(row.inbound_date).toLocaleDateString("ko-KR")
-                        : "-"}
-                    </TableCell>}
-                    {ts.isVisible("reference_number") && <TableCell style={ts.thStyle("reference_number")} className="max-w-[120px] truncate text-[13px]" title={row.reference_number || "-"}>
-                      {row.reference_number || "-"}
-                    </TableCell>}
-                    {ts.isVisible("source_type") && <TableCell style={ts.thStyle("source_type")} className="text-[13px]">
-                      {row.source_table
-                        ? SOURCE_TABLE_LABEL[row.source_table] || row.source_table
-                        : "-"}
-                    </TableCell>}
-                    {ts.isVisible("supplier_name") && <TableCell style={ts.thStyle("supplier_name")} className="max-w-[120px] truncate text-[13px]" title={row.supplier_name || "-"}>
-                      {row.supplier_name || "-"}
-                    </TableCell>}
-                    {ts.isVisible("item_number") && <TableCell style={ts.thStyle("item_number")} className="max-w-[130px] truncate text-[13px]" title={row.item_number || "-"}>
-                      {row.item_number || "-"}
-                    </TableCell>}
-                    {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="max-w-[150px] truncate text-[13px]" title={row.item_name || "-"}>{row.item_name || "-"}</TableCell>}
-                    {ts.isVisible("spec") && <TableCell style={ts.thStyle("spec")} className="max-w-[100px] truncate text-[13px]" title={row.spec || "-"}>{row.spec || "-"}</TableCell>}
-                    {ts.isVisible("inbound_qty") && <TableCell style={ts.thStyle("inbound_qty")} className="text-right text-[13px] font-semibold">
-                      {Number(row.inbound_qty || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("unit_price") && <TableCell style={ts.thStyle("unit_price")} className="text-right text-[13px]">
-                      {Number(row.unit_price || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("total_amount") && <TableCell style={ts.thStyle("total_amount")} className="text-right text-[13px] font-semibold">
-                      {Number(row.total_amount || 0).toLocaleString()}
-                    </TableCell>}
-                    {ts.isVisible("warehouse_name") && <TableCell style={ts.thStyle("warehouse_name")} className="text-[13px]">
-                      {row.warehouse_name || row.warehouse_code || "-"}
-                    </TableCell>}
-                    {ts.isVisible("inbound_status") && <TableCell style={ts.thStyle("inbound_status")} className="text-center">
-                      <Badge
-                        variant={getStatusVariant(row.inbound_status)}
-                        className="text-[11px]"
-                      >
-                        {row.inbound_status || "-"}
-                      </Badge>
-                    </TableCell>}
-                    {ts.isVisible("remark") && <TableCell style={ts.thStyle("remark")} className="max-w-[120px] truncate text-[13px]" title={row.memo || "-"}>
-                      {row.memo || "-"}
-                    </TableCell>}
-                  </TableRow>
-                ))
-              )}
-            </TableBody>
-          </Table>
-        </div>
+        <EDataTable
+          columns={[
+            { key: "inbound_number", label: "입고번호", width: "w-[130px]" },
+            { key: "inbound_type", label: "입고유형", width: "w-[90px]", render: (v) => (
+              <Badge variant={getTypeVariant(v)} className="text-[11px]">{v || "-"}</Badge>
+            )},
+            { key: "inbound_date", label: "입고일", width: "w-[100px]", render: (v) => v ? new Date(v).toLocaleDateString("ko-KR") : "-" },
+            { key: "reference_number", label: "참조번호", width: "w-[120px]" },
+            { key: "source_table", label: "데이터출처", width: "w-[80px]", render: (v) => v ? SOURCE_TABLE_LABEL[v] || v : "-" },
+            { key: "supplier_name", label: "공급처", width: "w-[120px]" },
+            { key: "item_number", label: "품목코드", width: "w-[100px]" },
+            { key: "item_name", label: "품목명", minWidth: "min-w-[150px]" },
+            { key: "spec", label: "규격", width: "w-[80px]" },
+            { key: "inbound_qty", label: "입고수량", width: "w-[80px]", align: "right", formatNumber: true },
+            { key: "unit_price", label: "단가", width: "w-[90px]", align: "right", formatNumber: true },
+            { key: "total_amount", label: "금액", width: "w-[100px]", align: "right", formatNumber: true },
+            { key: "warehouse_name", label: "창고", width: "w-[100px]", render: (_v, row) => row.warehouse_name || row.warehouse_code || "-" },
+            { key: "inbound_status", label: "입고상태", width: "w-[90px]", align: "center", render: (v) => (
+              <Badge variant={getStatusVariant(v)} className="text-[11px]">{v || "-"}</Badge>
+            )},
+            { key: "memo", label: "비고", width: "w-[100px]" },
+          ] as EDataTableColumn<InboundItem>[]}
+          data={ts.groupData(data)}
+          rowKey={(row) => row.id}
+          loading={loading}
+          emptyMessage="등록된 입고 내역이 없어요"
+          showCheckbox
+          checkedIds={checkedIds}
+          onCheckedChange={setCheckedIds}
+          showPagination
+          draggableColumns
+          columnOrderKey="c16-receiving"
+        />
       </div>
 
       {/* 입고 등록 모달 */}
diff --git a/frontend/app/(main)/COMPANY_16/logistics/warehouse/page.tsx b/frontend/app/(main)/COMPANY_16/logistics/warehouse/page.tsx
index 30544ddb..96b3d47e 100644
--- a/frontend/app/(main)/COMPANY_16/logistics/warehouse/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/logistics/warehouse/page.tsx
@@ -64,6 +64,7 @@ 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";
 
@@ -691,6 +692,32 @@ export default function WarehouseManagementPage() {
     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) {
@@ -775,70 +802,20 @@ export default function WarehouseManagementPage() {
               </div>
             </div>
 
-            <div className="flex-1 overflow-auto">
-              {warehouseLoading ? (
-                <div className="flex items-center justify-center h-32">
-                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
-                </div>
-              ) : warehouses.length === 0 ? (
-                <div className="flex items-center justify-center h-32 text-sm text-muted-foreground">
-                  등록된 창고가 없어요
-                </div>
-              ) : (
-                <Table style={{ tableLayout: "fixed" }}>
-                  <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>
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{col.label}</TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {warehouses.map((w, idx) => (
-                      <TableRow
-                        key={w.id}
-                        className={cn(
-                          "cursor-pointer text-xs",
-                          selectedWarehouseId === w.id && "bg-primary/10"
-                        )}
-                        onClick={() => setSelectedWarehouseId(w.id)}
-                        onDoubleClick={() => openWarehouseEditModal(w)}
-                      >
-                        <TableCell className="text-center text-muted-foreground">
-                          {idx + 1}
-                        </TableCell>
-                        {ts.visibleColumns.map((col) => {
-                          if (col.key === "warehouse_type") {
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)}>
-                                <Badge variant={getTypeVariant(w.warehouse_type)} className="text-[10px]">
-                                  {w.warehouse_type}
-                                </Badge>
-                              </TableCell>
-                            );
-                          }
-                          if (col.key === "status") {
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)}>
-                                <Badge variant={getStatusVariant(w.status)} className="text-[10px]">
-                                  {w.status}
-                                </Badge>
-                              </TableCell>
-                            );
-                          }
-                          return (
-                            <TableCell key={col.key} style={ts.thStyle(col.key)} className="truncate max-w-[150px]">
-                              {w[col.key] ?? ""}
-                            </TableCell>
-                          );
-                        })}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              )}
-            </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>
 
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 6f48424b..dfd1b666 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/company/page.tsx
@@ -31,6 +31,7 @@ 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";
@@ -376,6 +377,16 @@ export default function CompanyPage() {
     }
   };
 
+  // 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) => {
@@ -685,47 +696,17 @@ export default function CompanyPage() {
                     )}
                   </div>
                   {selectedDeptCode ? (
-                    <div className="flex-1 overflow-auto">
-                      {memberLoading ? (
-                        <div className="flex items-center justify-center py-10">
-                          <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                        </div>
-                      ) : members.length === 0 ? (
-                        <div className="flex flex-col items-center justify-center py-10 text-muted-foreground">
-                          <Users className="w-8 h-8 mb-2" />
-                          <span className="text-sm">소속 사원이 없어요</span>
-                        </div>
-                      ) : (
-                        <Table>
-                          <TableHeader className="sticky top-0 z-10">
-                            <TableRow className="bg-muted hover:bg-muted">
-                              <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-[100px] 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-[11px] font-bold uppercase tracking-wide text-muted-foreground">이메일</TableHead>
-                            </TableRow>
-                          </TableHeader>
-                          <TableBody>
-                            {members.map((row) => (
-                              <TableRow
-                                key={row.user_id || row.id}
-                                className="cursor-pointer"
-                                onDoubleClick={() => openUserModal(row)}
-                              >
-                                <TableCell className="text-[13px]">{row.sabun || "-"}</TableCell>
-                                <TableCell className="text-sm font-medium">{row.user_name}</TableCell>
-                                <TableCell className="text-[13px] font-mono">{row.user_id}</TableCell>
-                                <TableCell className="text-[13px]">{row.position_name || "-"}</TableCell>
-                                <TableCell className="text-[13px]">{row.cell_phone || "-"}</TableCell>
-                                <TableCell className="text-[13px]">{row.email || "-"}</TableCell>
-                              </TableRow>
-                            ))}
-                          </TableBody>
-                        </Table>
-                      )}
-                    </div>
+                    <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" />
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 a4cbb7ed..a2bbcba5 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/department/page.tsx
@@ -39,6 +39,7 @@ 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";
@@ -313,6 +314,36 @@ export default function DepartmentPage() {
 
   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,
+        }]
+      : []),
+  ];
+
   return (
     <div className="flex h-full flex-col gap-3 p-4">
       {/* 검색 필터 바 */}
@@ -366,61 +397,20 @@ export default function DepartmentPage() {
               </div>
 
               {/* 부서 테이블 */}
-              <div className="flex-1 overflow-auto">
-                <Table noWrapper style={{ tableLayout: "fixed" }}>
-                  <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-[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>
-                      {isColVisible("parent_dept_code") && <TableHead style={ts.thStyle("parent_dept_code")} className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상위부서</TableHead>}
-                      {isColVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {deptLoading ? (
-                      <TableRow>
-                        <TableCell colSpan={5} className="text-center py-12">
-                          <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
-                        </TableCell>
-                      </TableRow>
-                    ) : depts.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={5} className="text-center py-12 text-muted-foreground text-sm">
-                          등록된 부서가 없어요
-                        </TableCell>
-                      </TableRow>
-                    ) : depts.map((dept, idx) => (
-                      <TableRow
-                        key={dept.id}
-                        className={cn(
-                          "cursor-pointer select-none",
-                          selectedDeptId === dept.id ? "bg-primary/10 hover:bg-primary/10" : "hover:bg-muted/50"
-                        )}
-                        onClick={() => setSelectedDeptId((prev) => prev === dept.id ? null : dept.id)}
-                        onDoubleClick={openDeptEdit}
-                      >
-                        <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
-                        <TableCell className="text-[13px] font-mono text-muted-foreground">{dept.dept_code}</TableCell>
-                        <TableCell className="text-sm font-medium">{dept.dept_name}</TableCell>
-                        {isColVisible("parent_dept_code") && <TableCell style={ts.thStyle("parent_dept_code")} className="text-[13px] text-muted-foreground">{dept.parent_dept_code || "—"}</TableCell>}
-                        {isColVisible("status") && (
-                          <TableCell style={ts.thStyle("status")} className="text-[13px]">
-                            {dept.status && (
-                              <Badge
-                                variant={dept.status === "active" ? "default" : "outline"}
-                                className="text-[10px] px-1.5 py-0 h-5"
-                              >
-                                {dept.status === "active" ? "활성" : (dept.status || "—")}
-                              </Badge>
-                            )}
-                          </TableCell>
-                        )}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </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>
 
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 d818ada2..3318f70d 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
@@ -36,6 +36,7 @@ import {
   Pencil, Copy, Settings2,
 } from "lucide-react";
 import { Badge } from "@/components/ui/badge";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import { cn } from "@/lib/utils";
 import { apiClient } from "@/lib/api/client";
 import { useAuth } from "@/hooks/useAuth";
@@ -335,64 +336,21 @@ export default function ItemInfoPage() {
       </div>
 
       {/* 메인 테이블 */}
-      <div className="flex-1 overflow-auto">
-        {loading ? (
-          <div className="flex h-full items-center justify-center">
-            <Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
-          </div>
-        ) : items.length === 0 ? (
-          <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
-            등록된 품목이 없어요
-          </div>
-        ) : (
-          <Table style={{ tableLayout: "fixed" }}>
-            <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">#</TableHead>
-                {ts.visibleColumns.map((col) => (
-                  <TableHead
-                    key={col.key}
-                    style={ts.thStyle(col.key)}
-                    className={cn(
-                      "whitespace-nowrap text-xs",
-                      col.align === "right" && "text-right"
-                    )}
-                  >
-                    {col.label}
-                  </TableHead>
-                ))}
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              {items.map((item, idx) => (
-                <TableRow
-                  key={item.id ?? idx}
-                  className={cn(
-                    "cursor-pointer text-sm",
-                    selectedId === item.id && "bg-primary/10"
-                  )}
-                  onClick={() => setSelectedId(item.id)}
-                  onDoubleClick={() => openEditModal(item)}
-                >
-                  <TableCell className="text-center text-[13px] text-muted-foreground">{idx + 1}</TableCell>
-                  {ts.visibleColumns.map((col) => (
-                    <TableCell
-                      key={col.key}
-                      style={ts.thStyle(col.key)}
-                      className={cn(
-                        "whitespace-nowrap max-w-[160px] truncate",
-                        col.align === "right" && "text-right tabular-nums"
-                      )}
-                    >
-                      {item[col.key] ?? ""}
-                    </TableCell>
-                  ))}
-                </TableRow>
-              ))}
-            </TableBody>
-          </Table>
-        )}
-      </div>
+      <EDataTable
+        columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+          key: col.key,
+          label: col.label,
+          align: col.align as "left" | "center" | "right" | 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}>
diff --git a/frontend/app/(main)/COMPANY_16/master-data/options/page.tsx b/frontend/app/(main)/COMPANY_16/master-data/options/page.tsx
index 91aa75ef..7506ad94 100644
--- a/frontend/app/(main)/COMPANY_16/master-data/options/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/master-data/options/page.tsx
@@ -110,7 +110,7 @@ export default function OptionsSettingPage() {
               {selectedColumn && selectedTableName ? (
                 <CategoryValueManager
                   tableName={selectedTableName}
-                  columnName={selectedColumn.includes("__") ? selectedColumn.split("__").pop()! : selectedColumn}
+                  columnName={selectedColumn.includes(".") ? selectedColumn.split(".").pop()! : selectedColumn}
                   columnLabel={selectedColumnLabel}
                 />
               ) : (
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 c4349c90..929d35c1 100644
--- a/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/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";
@@ -31,6 +31,7 @@ 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";
@@ -113,6 +114,19 @@ export default function SubcontractorItemPage() {
     return categoryOptions[col]?.find((o) => o.code === code)?.label || code;
   };
 
+  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
+
   // 좌측: 품목 조회 (division이 "외주관리"인 품목만 필터링)
   const outsourcingDivisionCode = categoryOptions["division"]?.find(
     (o) => o.label === "외주관리" || o.label === "외주" || o.label.includes("외주")
@@ -337,52 +351,18 @@ export default function SubcontractorItemPage() {
                   </Button>
                 </div>
               </div>
-              <div className="flex-1 overflow-auto">
-                {itemLoading ? (
-                  <div className="flex items-center justify-center py-12">
-                    <Loader2 className="w-6 h-6 animate-spin text-muted-foreground" />
-                  </div>
-                ) : items.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>
-                ) : (
-                  <Table noWrapper style={{ tableLayout: "fixed" }}>
-                    <thead className="sticky top-0 z-10 bg-card">
-                      <TableRow>
-                        {ts.isVisible("item_number") && <TableHead style={ts.thStyle("item_number")} className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>}
-                        {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="min-w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>}
-                        {ts.isVisible("size") && <TableHead style={ts.thStyle("size")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-                        {ts.isVisible("unit") && <TableHead style={ts.thStyle("unit")} className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>}
-                        {ts.isVisible("standard_price") && <TableHead style={ts.thStyle("standard_price")} className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준단가</TableHead>}
-                        {ts.isVisible("selling_price") && <TableHead style={ts.thStyle("selling_price")} className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">판매가격</TableHead>}
-                        {ts.isVisible("currency_code") && <TableHead style={ts.thStyle("currency_code")} className="w-[50px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>}
-                        {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                      </TableRow>
-                    </thead>
-                    <TableBody>
-                      {items.map((item) => (
-                        <TableRow
-                          key={item.id}
-                          className={cn("cursor-pointer", selectedItemId === item.id && "border-l-2 border-l-primary bg-primary/[0.08]")}
-                          onClick={() => setSelectedItemId(item.id)}
-                          onDoubleClick={openEditItem}
-                        >
-                          {ts.isVisible("item_number") && <TableCell style={ts.thStyle("item_number")} className="text-[13px] font-mono">{item.item_number}</TableCell>}
-                          {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="text-sm max-w-[150px] truncate" title={item.item_name}>{item.item_name || "-"}</TableCell>}
-                          {ts.isVisible("size") && <TableCell style={ts.thStyle("size")} className="text-[13px]">{item.size || "-"}</TableCell>}
-                          {ts.isVisible("unit") && <TableCell style={ts.thStyle("unit")} className="text-[13px]">{item.unit || "-"}</TableCell>}
-                          {ts.isVisible("standard_price") && <TableCell style={ts.thStyle("standard_price")} className="text-[13px] text-right font-mono">{formatNum(item.standard_price)}</TableCell>}
-                          {ts.isVisible("selling_price") && <TableCell style={ts.thStyle("selling_price")} className="text-[13px] text-right font-mono">{formatNum(item.selling_price)}</TableCell>}
-                          {ts.isVisible("currency_code") && <TableCell style={ts.thStyle("currency_code")} className="text-[13px]">{item.currency_code || "-"}</TableCell>}
-                          {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="text-[13px]">{item.status || "-"}</TableCell>}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                )}
-              </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>
 
diff --git a/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor/page.tsx b/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor/page.tsx
index 24c3caee..2baef4e0 100644
--- a/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/outsourcing/subcontractor/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-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";
@@ -32,6 +32,7 @@ import { previewNumberingCode, allocateNumberingCode } from "@/lib/api/numbering
 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";
@@ -172,6 +173,14 @@ export default function SubcontractorManagementPage() {
     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);
@@ -866,49 +875,18 @@ export default function SubcontractorManagementPage() {
                 </Button>
               </div>
             </div>
-            <div className="flex-1 overflow-auto">
-              {subcontractorLoading ? (
-                <div className="flex items-center justify-center py-16">
-                  <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                </div>
-              ) : subcontractors.length === 0 ? (
-                <div className="flex flex-col items-center justify-center py-16 text-muted-foreground">
-                  <Wrench 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">
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead key={col.key} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{col.label}</TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {subcontractors.map((sub) => (
-                      <TableRow
-                        key={sub.id}
-                        className={cn(
-                          "cursor-pointer",
-                          selectedSubcontractorId === sub.id
-                            ? "bg-primary/10 border-l-2 border-l-primary"
-                            : "hover:bg-muted/50"
-                        )}
-                        onClick={() => setSelectedSubcontractorId(sub.id)}
-                        onDoubleClick={openSubcontractorEdit}
-                      >
-                        {ts.visibleColumns.map((col) => (
-                          <TableCell key={col.key} className="text-[13px]">
-                            {renderCellValue(sub, col.key)}
-                          </TableCell>
-                        ))}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              )}
-            </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>
 
diff --git a/frontend/app/(main)/COMPANY_16/production/bom/page.tsx b/frontend/app/(main)/COMPANY_16/production/bom/page.tsx
index d3fb7be1..1cf6eb63 100644
--- a/frontend/app/(main)/COMPANY_16/production/bom/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/bom/page.tsx
@@ -65,6 +65,7 @@ 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";
@@ -945,71 +946,31 @@ export default function BomManagementPage() {
 
               {/* BOM 목록 테이블 */}
               <div className="flex-1 overflow-auto">
-                {loading ? (
-                  <div className="flex items-center justify-center py-12">
-                    <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                  </div>
-                ) : bomList.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">등록된 BOM이 없어요</p>
-                  </div>
-                ) : (
-                  <Table style={{ tableLayout: "fixed" }}>
-                    <TableHeader className="sticky top-0 z-10">
-                      <TableRow className="bg-muted hover:bg-muted">
-                        <TableHead className="w-[36px] text-center">
-                          <Checkbox
-                            checked={checkedIds.length === bomList.length && bomList.length > 0}
-                            onCheckedChange={(checked) =>
-                              setCheckedIds(checked ? bomList.map((r) => r.id) : [])
-                            }
-                          />
-                        </TableHead>
-                        {ts.visibleColumns.map((col) => (
-                          <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{col.label}</TableHead>
-                        ))}
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {bomList.map((row) => (
-                        <TableRow
-                          key={row.id}
-                          className={cn(
-                            "cursor-pointer transition-colors",
-                            selectedBomId === row.id
-                              ? "bg-primary/10 border-l-2 border-l-primary"
-                              : "hover:bg-muted/50"
-                          )}
-                          onClick={() => setSelectedBomId(row.id)}
-                        >
-                          <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-                            <Checkbox
-                              checked={checkedIds.includes(row.id)}
-                              onCheckedChange={(checked) =>
-                                setCheckedIds((prev) =>
-                                  checked ? [...prev, row.id] : prev.filter((id) => id !== row.id)
-                                )
-                              }
-                            />
-                          </TableCell>
-                          {ts.visibleColumns.map((col) => {
-                            if (col.key === "item_code") {
-                              return <TableCell key={col.key} style={ts.thStyle(col.key)} className="font-mono text-[13px]">{row.item_code || row.item_number || "-"}</TableCell>;
-                            }
-                            if (col.key === "bom_type") {
-                              return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px]">{BOM_TYPE_OPTIONS.find((o) => o.code === row.bom_type)?.label || row.bom_type || "-"}</TableCell>;
-                            }
-                            if (col.key === "status") {
-                              return <TableCell key={col.key} style={ts.thStyle(col.key)}>{renderStatusBadge(row.status)}</TableCell>;
-                            }
-                            return <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-[13px] max-w-[160px] truncate">{row[col.key] || "-"}</TableCell>;
-                          })}
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                )}
+                <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>
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 aeff278d..32f7b2cd 100644
--- a/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
@@ -1040,8 +1040,25 @@ export default function ProductionPlanManagementPage() {
                           </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 />
+                                  {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" />
@@ -1093,7 +1110,8 @@ export default function ProductionPlanManagementPage() {
                                 </TableRow>
                               ))}
                             </React.Fragment>
-                          ))}
+                            );
+                          })}
                         </TableBody>
                       </Table>
                     </div>
diff --git a/frontend/app/(main)/COMPANY_16/production/process-info/ItemRoutingTab.tsx b/frontend/app/(main)/COMPANY_16/production/process-info/ItemRoutingTab.tsx
index 9acf4e17..a5b136c2 100644
--- a/frontend/app/(main)/COMPANY_16/production/process-info/ItemRoutingTab.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/process-info/ItemRoutingTab.tsx
@@ -13,6 +13,7 @@ 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,
@@ -684,62 +685,27 @@ export function ItemRoutingTab() {
                 <div className="min-h-0 flex-1 overflow-auto">
                   {!selectedVersionId ? (
                     <p className="py-8 text-center text-sm text-muted-foreground">버전을 선택해주세요</p>
-                  ) : detailsLoading ? (
-                    <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>
-                  ) : detailsGridData.length === 0 ? (
-                    <p className="py-8 text-center text-sm text-muted-foreground">등록된 공정이 없어요</p>
                   ) : (
-                    <Table>
-                      <TableHeader className="sticky top-0 bg-muted/90 z-10">
-                        <TableRow>
-                          <TableHead className="w-10 text-muted-foreground">
-                            <Checkbox
-                              checked={selectedDetailIds.size === detailsGridData.length && detailsGridData.length > 0}
-                              onCheckedChange={(checked) => {
-                                if (checked) setSelectedDetailIds(new Set(detailsGridData.map((r) => r.id)));
-                                else setSelectedDetailIds(new Set());
-                              }}
-                            />
-                          </TableHead>
-                          <TableHead className="w-[80px] text-center text-muted-foreground">순번</TableHead>
-                          <TableHead className="text-muted-foreground">공정명</TableHead>
-                          <TableHead className="w-[80px] text-center text-muted-foreground">필수</TableHead>
-                          <TableHead className="w-[90px] text-center text-muted-foreground">순서고정</TableHead>
-                          <TableHead className="w-[100px] text-muted-foreground">작업구분</TableHead>
-                          <TableHead className="w-[90px] text-right text-muted-foreground">표준시간</TableHead>
-                          <TableHead className="text-muted-foreground">외주업체</TableHead>
-                        </TableRow>
-                      </TableHeader>
-                      <TableBody>
-                        {detailsGridData.map((row) => (
-                          <TableRow key={row.id} className="hover:bg-muted/30">
-                            <TableCell onClick={(e) => e.stopPropagation()}>
-                              <Checkbox
-                                checked={selectedDetailIds.has(row.id)}
-                                onCheckedChange={(checked) => {
-                                  setSelectedDetailIds((prev) => {
-                                    const next = new Set(prev);
-                                    if (checked) next.add(row.id);
-                                    else next.delete(row.id);
-                                    return next;
-                                  });
-                                }}
-                              />
-                            </TableCell>
-                            <TableCell className="text-center">{row.seq_no}</TableCell>
-                            <TableCell>{row.process_display}</TableCell>
-                            <TableCell className="text-center">{row.is_required}</TableCell>
-                            <TableCell className="text-center">{row.is_fixed_order}</TableCell>
-                            <TableCell>{row.work_type}</TableCell>
-                            <TableCell className="text-right">{row.standard_time}</TableCell>
-                            <TableCell>{row.outsource_display}</TableCell>
-                          </TableRow>
-                        ))}
-                      </TableBody>
-                    </Table>
+                    <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>
               </>
diff --git a/frontend/app/(main)/COMPANY_16/production/process-info/ProcessMasterTab.tsx b/frontend/app/(main)/COMPANY_16/production/process-info/ProcessMasterTab.tsx
index 34244cc9..cfbee962 100644
--- a/frontend/app/(main)/COMPANY_16/production/process-info/ProcessMasterTab.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/process-info/ProcessMasterTab.tsx
@@ -46,6 +46,7 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { Checkbox } from "@/components/ui/checkbox";
+import { EDataTable, EDataTableColumn } from "@/components/common/EDataTable";
 import {
   getProcessList,
   createProcess,
@@ -435,69 +436,34 @@ export function ProcessMasterTab() {
 
             {/* 공정 목록 테이블 */}
             <div className="min-h-0 flex-1 overflow-auto">
-              {listBusy ? (
-                <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>
-              ) : processGridData.length === 0 ? (
-                <p className="py-8 text-center text-sm text-muted-foreground">조회된 공정이 없어요</p>
-              ) : (
-                <Table>
-                  <TableHeader className="sticky top-0 bg-muted/90 z-10">
-                    <TableRow>
-                      <TableHead className="w-10 text-muted-foreground">
-                        <Checkbox
-                          checked={selectedIds.size === processGridData.length && processGridData.length > 0}
-                          onCheckedChange={(checked) => {
-                            if (checked) setSelectedIds(new Set(processGridData.map((r) => r.id)));
-                            else setSelectedIds(new Set());
-                          }}
-                        />
-                      </TableHead>
-                      <TableHead className="w-[130px] text-muted-foreground">공정코드</TableHead>
-                      <TableHead className="text-muted-foreground">공정명</TableHead>
-                      <TableHead className="w-[120px] text-muted-foreground">공정유형</TableHead>
-                      <TableHead className="w-[110px] text-right text-muted-foreground">표준시간(분)</TableHead>
-                      <TableHead className="w-[90px] text-right text-muted-foreground">작업인원</TableHead>
-                      <TableHead className="w-[90px] text-center text-muted-foreground">사용여부</TableHead>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {processGridData.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        data-state={selectedProcess?.id === row.id ? "selected" : undefined}
-                        className="cursor-pointer hover:bg-muted/30"
-                        onClick={() => {
-                          const proc = processes.find((p) => p.id === row.id);
-                          setSelectedProcess(proc || null);
-                        }}
-                      >
-                        <TableCell onClick={(e) => e.stopPropagation()}>
-                          <Checkbox
-                            checked={selectedIds.has(row.id)}
-                            onCheckedChange={(checked) => {
-                              setSelectedIds((prev) => {
-                                const next = new Set(prev);
-                                if (checked) next.add(row.id);
-                                else next.delete(row.id);
-                                return next;
-                              });
-                            }}
-                          />
-                        </TableCell>
-                        <TableCell className="font-mono text-xs">{row.process_code}</TableCell>
-                        <TableCell>{row.process_name}</TableCell>
-                        <TableCell>{row.process_type_display}</TableCell>
-                        <TableCell className="text-right">{row.standard_time}</TableCell>
-                        <TableCell className="text-right">{row.worker_count}</TableCell>
-                        <TableCell className="text-center">{row.use_yn_display}</TableCell>
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              )}
+              <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>
diff --git a/frontend/app/(main)/COMPANY_16/production/work-instruction/page.tsx b/frontend/app/(main)/COMPANY_16/production/work-instruction/page.tsx
index b70ab356..08ace7ec 100644
--- a/frontend/app/(main)/COMPANY_16/production/work-instruction/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/work-instruction/page.tsx
@@ -23,6 +23,7 @@ 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: "작업지시번호" },
@@ -445,104 +446,74 @@ export default function WorkInstructionPage() {
           </div>
 
           {/* 테이블 */}
-          <div className="flex-1 overflow-auto">
-            <Table style={{ tableLayout: "fixed" }}>
-              <TableHeader className="sticky top-0 z-10">
-                <TableRow className="bg-muted hover:bg-muted">
-                  {ts.isVisible("work_instruction_no") && <TableHead style={ts.thStyle("work_instruction_no")} className="w-[150px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">작업지시번호</TableHead>}
-                  {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                  {ts.isVisible("progress") && <TableHead style={ts.thStyle("progress")} className="w-[100px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">진행현황</TableHead>}
-                  {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>}
-                  {ts.isVisible("spec") && <TableHead style={ts.thStyle("spec")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-                  {ts.isVisible("qty") && <TableHead style={ts.thStyle("qty")} className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>}
-                  {ts.isVisible("equipment") && <TableHead style={ts.thStyle("equipment")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">설비</TableHead>}
-                  {ts.isVisible("routing") && <TableHead style={ts.thStyle("routing")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">라우팅</TableHead>}
-                  {ts.isVisible("work_team") && <TableHead style={ts.thStyle("work_team")} className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">작업조</TableHead>}
-                  {ts.isVisible("worker") && <TableHead style={ts.thStyle("worker")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">작업자</TableHead>}
-                  {ts.isVisible("start_date") && <TableHead style={ts.thStyle("start_date")} className="w-[100px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">시작일</TableHead>}
-                  {ts.isVisible("end_date") && <TableHead style={ts.thStyle("end_date")} className="w-[100px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">완료일</TableHead>}
-                  {ts.isVisible("actions") && <TableHead style={ts.thStyle("actions")} className="w-[150px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">작업</TableHead>}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow><TableCell colSpan={13} className="text-center py-16"><Loader2 className="w-6 h-6 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                ) : orders.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={13} className="py-16">
-                      <div className="flex flex-col items-center justify-center 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>
-                    </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/30">
-                      {ts.isVisible("work_instruction_no") && <TableCell style={ts.thStyle("work_instruction_no")} className="font-mono text-[13px] font-medium">{getDisplayNo(o)}</TableCell>}
-                      {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="text-center"><Badge variant="outline" className={cn("text-[10px]", sBadge.cls)}>{sBadge.label}</Badge></TableCell>}
-                      {ts.isVisible("progress") && <TableCell style={ts.thStyle("progress")} 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-success" : pct > 0 ? "bg-primary" : "bg-muted-foreground/30")} style={{ width: `${pct}%` }} />
-                            </div>
-                            <span className="text-[10px] text-muted-foreground">{pct}%</span>
-                          </div>
-                        ) : <span className="text-[10px] text-muted-foreground">↑</span>}
-                      </TableCell>}
-                      {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="text-sm">{o.item_name || o.item_number || "-"}</TableCell>}
-                      {ts.isVisible("spec") && <TableCell style={ts.thStyle("spec")} className="text-[13px] text-muted-foreground">{o.item_spec || "-"}</TableCell>}
-                      {ts.isVisible("qty") && <TableCell style={ts.thStyle("qty")} className="text-right text-[13px] font-mono font-medium">{Number(o.detail_qty || 0).toLocaleString()}</TableCell>}
-                      {ts.isVisible("equipment") && <TableCell style={ts.thStyle("equipment")} className="text-[13px]">{isFirstOfGroup ? (o.equipment_name || "-") : ""}</TableCell>}
-                      {ts.isVisible("routing") && <TableCell style={ts.thStyle("routing")} className="text-[13px]">
-                        {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>}
-                      {ts.isVisible("work_team") && <TableCell style={ts.thStyle("work_team")} className="text-center text-[13px]">{isFirstOfGroup ? (o.work_team || "-") : ""}</TableCell>}
-                      {ts.isVisible("worker") && <TableCell style={ts.thStyle("worker")} className="text-[13px]">{isFirstOfGroup ? getWorkerName(o.worker) : ""}</TableCell>}
-                      {ts.isVisible("start_date") && <TableCell style={ts.thStyle("start_date")} className="text-center text-[13px] font-mono">{isFirstOfGroup ? (o.start_date || "-") : ""}</TableCell>}
-                      {ts.isVisible("end_date") && <TableCell style={ts.thStyle("end_date")} className="text-center text-[13px] font-mono">{isFirstOfGroup ? (o.end_date || "-") : ""}</TableCell>}
-                      {ts.isVisible("actions") && <TableCell style={ts.thStyle("actions")} className="text-center">
-                        {isFirstOfGroup && (
-                          <div className="flex items-center justify-center gap-1">
-                            <Button variant="ghost" size="sm" className="h-7 text-xs px-2" onClick={() => openEditModal(o)}><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(o.wi_id)}><Trash2 className="w-3 h-3" /></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>
+                }
+                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>
 
diff --git a/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx b/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
index 0f0fbfa1..8e5074c3 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/order/page.tsx
@@ -26,6 +26,7 @@ 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";
@@ -588,8 +589,6 @@ export default function PurchaseOrderPage() {
     toast.success("다운로드 완료");
   };
 
-  const allChecked = orders.length > 0 && checkedIds.length === orders.length;
-  const someChecked = checkedIds.length > 0 && checkedIds.length < orders.length;
 
   return (
     <div className="flex h-full flex-col gap-3 p-3">
@@ -638,90 +637,32 @@ export default function PurchaseOrderPage() {
       </div>
 
       {/* 데이터 테이블 */}
-      <div className="flex-1 overflow-auto border rounded-lg bg-card">
-        <Table style={{ tableLayout: "fixed" }}>
-          <TableHeader className="sticky top-0 z-10">
-            <TableRow className="bg-muted hover:bg-muted">
-              <TableHead className="w-[44px] text-center">
-                <Checkbox
-                  checked={allChecked}
-                  data-state={someChecked ? "indeterminate" : undefined}
-                  onCheckedChange={(checked) => {
-                    setCheckedIds(checked ? orders.map((o) => o.id) : []);
-                  }}
-                />
-              </TableHead>
-              {ts.isVisible("purchase_no") && <TableHead style={ts.thStyle("purchase_no")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주번호</TableHead>}
-              {ts.isVisible("order_date") && <TableHead style={ts.thStyle("order_date")} className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주일</TableHead>}
-              {ts.isVisible("supplier_name") && <TableHead style={ts.thStyle("supplier_name")} className="w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">공급업체</TableHead>}
-              {ts.isVisible("item_code") && <TableHead style={ts.thStyle("item_code")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>}
-              {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>}
-              {ts.isVisible("spec") && <TableHead style={ts.thStyle("spec")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-              {ts.isVisible("order_qty") && <TableHead style={ts.thStyle("order_qty")} className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">발주수량</TableHead>}
-              {ts.isVisible("received_qty") && <TableHead style={ts.thStyle("received_qty")} className="w-[80px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">입고수량</TableHead>}
-              {ts.isVisible("remain_qty") && <TableHead style={ts.thStyle("remain_qty")} className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>}
-              {ts.isVisible("unit_price") && <TableHead style={ts.thStyle("unit_price")} className="w-[100px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>}
-              {ts.isVisible("amount") && <TableHead style={ts.thStyle("amount")} className="w-[110px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>}
-              {ts.isVisible("due_date") && <TableHead style={ts.thStyle("due_date")} className="w-[110px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>}
-              {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-              {ts.isVisible("memo") && <TableHead style={ts.thStyle("memo")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</TableHead>}
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {loading ? (
-              <TableRow>
-                <TableCell colSpan={ts.visibleColumns.length + 1} 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={ts.visibleColumns.length + 1} className="text-center py-12 text-muted-foreground text-sm">
-                  등록된 발주가 없어요
-                </TableCell>
-              </TableRow>
-            ) : orders.map((row) => (
-              <TableRow
-                key={row.id}
-                className={cn("cursor-pointer", checkedIds.includes(row.id) && "bg-primary/5")}
-                onDoubleClick={() => openEditModal(row.purchase_no)}
-              >
-                <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
-                  <Checkbox
-                    checked={checkedIds.includes(row.id)}
-                    onCheckedChange={(checked) => {
-                      setCheckedIds((prev) =>
-                        checked ? [...prev, row.id] : prev.filter((id) => id !== row.id)
-                      );
-                    }}
-                  />
-                </TableCell>
-                {ts.isVisible("purchase_no") && <TableCell style={ts.thStyle("purchase_no")} className="text-[13px] font-mono">{row.purchase_no}</TableCell>}
-                {ts.isVisible("order_date") && <TableCell style={ts.thStyle("order_date")} className="text-[13px]">{row.order_date}</TableCell>}
-                {ts.isVisible("supplier_name") && <TableCell style={ts.thStyle("supplier_name")} className="text-[13px] max-w-[140px]"><span className="block truncate" title={row.supplier_name}>{row.supplier_name}</span></TableCell>}
-                {ts.isVisible("item_code") && <TableCell style={ts.thStyle("item_code")} className="text-[13px] font-mono max-w-[120px]"><span className="block truncate" title={row.item_code}>{row.item_code}</span></TableCell>}
-                {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="text-[13px] max-w-[140px]"><span className="block truncate" title={row.item_name}>{row.item_name}</span></TableCell>}
-                {ts.isVisible("spec") && <TableCell style={ts.thStyle("spec")} className="text-[13px] text-muted-foreground">{row.spec}</TableCell>}
-                {ts.isVisible("order_qty") && <TableCell style={ts.thStyle("order_qty")} className="text-[13px] text-right font-mono">{row.order_qty ? Number(row.order_qty).toLocaleString() : ""}</TableCell>}
-                {ts.isVisible("received_qty") && <TableCell style={ts.thStyle("received_qty")} className="text-[13px] text-right font-mono">{row.received_qty ? Number(row.received_qty).toLocaleString() : ""}</TableCell>}
-                {ts.isVisible("remain_qty") && <TableCell style={ts.thStyle("remain_qty")} className="text-[13px] text-right font-mono">{row.remain_qty ? Number(row.remain_qty).toLocaleString() : ""}</TableCell>}
-                {ts.isVisible("unit_price") && <TableCell style={ts.thStyle("unit_price")} className="text-[13px] text-right font-mono">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>}
-                {ts.isVisible("amount") && <TableCell style={ts.thStyle("amount")} className="text-[13px] text-right font-mono font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>}
-                {ts.isVisible("due_date") && <TableCell style={ts.thStyle("due_date")} className="text-[13px]">{row.due_date}</TableCell>}
-                {ts.isVisible("status") && (
-                  <TableCell style={ts.thStyle("status")}>
-                    {row.status && (
-                      <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[row.status] || "")}>
-                        {row.status}
-                      </span>
-                    )}
-                  </TableCell>
-                )}
-                {ts.isVisible("memo") && <TableCell style={ts.thStyle("memo")} className="text-[13px] text-muted-foreground max-w-[120px]"><span className="block truncate">{row.memo}</span></TableCell>}
-              </TableRow>
-            ))}
-          </TableBody>
-        </Table>
+      <div className="flex-1 overflow-hidden border rounded-lg bg-card">
+        <EDataTable
+          columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+            key: col.key,
+            label: col.label,
+            align: ["order_qty", "received_qty", "remain_qty", "unit_price", "amount"].includes(col.key) ? "right" : undefined,
+            formatNumber: ["order_qty", "received_qty", "remain_qty", "unit_price", "amount"].includes(col.key),
+            render: col.key === "status"
+              ? (val: any, row: any) => row.status ? (
+                  <span className={cn("inline-flex items-center rounded-full border px-2 py-0.5 text-[11px] font-semibold", STATUS_BADGE_CLASS[row.status] || "")}>
+                    {row.status}
+                  </span>
+                ) : null
+              : undefined,
+          }))}
+          data={ts.groupData(orders)}
+          loading={loading}
+          emptyMessage="등록된 발주가 없어요"
+          showCheckbox
+          checkedIds={checkedIds}
+          onCheckedChange={setCheckedIds}
+          onRowDoubleClick={(row) => openEditModal(row.purchase_no)}
+          showPagination
+          draggableColumns={false}
+          columnOrderKey="c16-purchase-order"
+        />
       </div>
 
       {/* 발주 등록/수정 모달 */}
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 b730842a..c031bc9e 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/purchase-item/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-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,6 +20,7 @@ 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 = "supplier_item_mapping";
@@ -128,6 +129,25 @@ export default function PurchaseItemPage() {
   const isColVisible = (key: string) => ts.isVisible(key);
   const itemColSpan = 2 + ITEM_COLUMNS.filter((c) => isColVisible(c.key)).length;
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const cols: EDataTableColumn[] = [
+      { key: "item_number", label: "품번", width: "w-[110px]" },
+      { key: "item_name", label: "품명" },
+    ];
+    if (isColVisible("size")) cols.push({ key: "size", label: "규격", width: "w-[90px]", render: (v) => v || "-" });
+    if (isColVisible("unit")) cols.push({ key: "unit", label: "단위", width: "w-[60px]", render: (v) => v || "-" });
+    if (isColVisible("standard_price")) cols.push({ key: "standard_price", label: "기준단가", width: "w-[90px]", align: "right", formatNumber: true });
+    if (isColVisible("status")) cols.push({
+      key: "status", label: "상태", width: "w-[60px]", align: "center",
+      render: (v) => (
+        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
+          v === "ACTIVE" || v === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
+        )}>{v || "-"}</span>
+      ),
+    });
+    return cols;
+  }, [ts.visibleColumns]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // 우측: 공급업체 매핑 조회
   useEffect(() => {
     if (!selectedItem?.item_number) { setSupplierItems([]); setSupplierCheckedIds([]); return; }
@@ -380,50 +400,18 @@ export default function PurchaseItemPage() {
                   <Settings2 className="h-3.5 w-3.5" />
                 </Button>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="sticky top-0 z-10">
-                    <TableRow className="bg-muted hover:bg-muted">
-                      <TableHead className="w-[110px] 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>
-                      {isColVisible("size") && <TableHead style={ts.thStyle("size")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-                      {isColVisible("unit") && <TableHead style={ts.thStyle("unit")} className="w-[60px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>}
-                      {isColVisible("standard_price") && <TableHead style={ts.thStyle("standard_price")} className="w-[90px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준단가</TableHead>}
-                      {isColVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[60px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {itemLoading ? (
-                      <TableRow><TableCell colSpan={itemColSpan} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                    ) : items.length === 0 ? (
-                      <TableRow><TableCell colSpan={itemColSpan} className="h-32 text-center text-muted-foreground text-sm">등록된 구매품목이 없어요</TableCell></TableRow>
-                    ) : items.map((item) => (
-                      <TableRow
-                        key={item.id}
-                        className={cn(
-                          "cursor-pointer text-xs border-l-2",
-                          selectedItemId === item.id ? "border-l-primary bg-primary/5" : "border-l-transparent"
-                        )}
-                        onClick={() => setSelectedItemId(item.id)}
-                        onDoubleClick={openEditItem}
-                      >
-                        <TableCell className="p-2 font-medium truncate max-w-[110px]">{item.item_number}</TableCell>
-                        <TableCell className="p-2 truncate max-w-[160px]">{item.item_name}</TableCell>
-                        {isColVisible("size") && <TableCell style={ts.thStyle("size")} className="p-2 truncate">{item.size || "-"}</TableCell>}
-                        {isColVisible("unit") && <TableCell style={ts.thStyle("unit")} className="p-2">{item.unit || "-"}</TableCell>}
-                        {isColVisible("standard_price") && <TableCell style={ts.thStyle("standard_price")} className="p-2 text-right">{item.standard_price ? Number(item.standard_price).toLocaleString() : "-"}</TableCell>}
-                        {isColVisible("status") && (
-                          <TableCell style={ts.thStyle("status")} className="p-2 text-center">
-                            <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
-                              item.status === "ACTIVE" || item.status === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
-                            )}>{item.status || "-"}</span>
-                          </TableCell>
-                        )}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </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-purchase-item-main"
+              />
             </div>
           </ResizablePanel>
 
diff --git a/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx b/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
index 8c06cbb8..4eb3ed3f 100644
--- a/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/purchase/supplier/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-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,6 +20,7 @@ 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 SUPPLIER_TABLE = "supplier_mng";
 const MAPPING_TABLE = "supplier_item_mapping";
@@ -101,6 +102,24 @@ export default function SupplierManagementPage() {
   const isColVisible = (key: string) => ts.isVisible(key);
   const supplierColSpan = 2 + SUPPLIER_COLUMNS.filter((c) => isColVisible(c.key)).length;
 
+  const mainTableColumns = useMemo<EDataTableColumn[]>(() => {
+    const cols: EDataTableColumn[] = [
+      { key: "supplier_code", label: "공급업체코드", width: "w-[120px]" },
+      { key: "supplier_name", label: "공급업체명" },
+    ];
+    if (isColVisible("contact_person")) cols.push({ key: "contact_person", label: "담당자", width: "w-[90px]", render: (v) => v || "-" });
+    if (isColVisible("contact_phone")) cols.push({ key: "contact_phone", label: "연락처", width: "w-[120px]", render: (v) => v || "-" });
+    if (isColVisible("status")) cols.push({
+      key: "status", label: "상태", width: "w-[70px]", align: "center",
+      render: (v) => (
+        <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
+          v === "ACTIVE" || v === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
+        )}>{v || "-"}</span>
+      ),
+    });
+    return cols;
+  }, [ts.visibleColumns]); // eslint-disable-line react-hooks/exhaustive-deps
+
   // 우측: 품목 매핑 조회
   useEffect(() => {
     if (!selectedSupplier?.supplier_code) { setMappingItems([]); setMappingCheckedIds([]); return; }
@@ -369,48 +388,18 @@ export default function SupplierManagementPage() {
                   </Button>
                 </div>
               </div>
-              <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="sticky top-0 z-10">
-                    <TableRow className="bg-muted hover:bg-muted">
-                      <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>
-                      {isColVisible("contact_person") && <TableHead style={ts.thStyle("contact_person")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">담당자</TableHead>}
-                      {isColVisible("contact_phone") && <TableHead style={ts.thStyle("contact_phone")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">연락처</TableHead>}
-                      {isColVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[70px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {supplierLoading ? (
-                      <TableRow><TableCell colSpan={supplierColSpan} className="h-32 text-center"><Loader2 className="mx-auto h-5 w-5 animate-spin" /></TableCell></TableRow>
-                    ) : suppliers.length === 0 ? (
-                      <TableRow><TableCell colSpan={supplierColSpan} className="h-32 text-center text-muted-foreground text-sm">등록된 공급업체가 없어요</TableCell></TableRow>
-                    ) : suppliers.map((s) => (
-                      <TableRow
-                        key={s.id}
-                        className={cn(
-                          "cursor-pointer text-xs border-l-2",
-                          selectedSupplierId === s.id ? "border-l-primary bg-primary/5" : "border-l-transparent"
-                        )}
-                        onClick={() => setSelectedSupplierId(s.id)}
-                        onDoubleClick={openSupplierEdit}
-                      >
-                        <TableCell className="p-2 font-medium truncate max-w-[120px]">{s.supplier_code}</TableCell>
-                        <TableCell className="p-2 truncate max-w-[160px]">{s.supplier_name}</TableCell>
-                        {isColVisible("contact_person") && <TableCell style={ts.thStyle("contact_person")} className="p-2 truncate">{s.contact_person || "-"}</TableCell>}
-                        {isColVisible("contact_phone") && <TableCell style={ts.thStyle("contact_phone")} className="p-2 truncate">{s.contact_phone || "-"}</TableCell>}
-                        {isColVisible("status") && (
-                          <TableCell style={ts.thStyle("status")} className="p-2 text-center">
-                            <span className={cn("text-[10px] font-medium px-1.5 py-0.5 rounded",
-                              s.status === "ACTIVE" || s.status === "사용" ? "bg-success/10 text-success" : "bg-muted text-muted-foreground"
-                            )}>{s.status || "-"}</span>
-                          </TableCell>
-                        )}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </div>
+              <EDataTable
+                columns={mainTableColumns}
+                data={ts.groupData(suppliers)}
+                loading={supplierLoading}
+                emptyMessage="등록된 공급업체가 없어요"
+                selectedId={selectedSupplierId}
+                onSelect={(id) => setSelectedSupplierId(id)}
+                onRowDoubleClick={() => openSupplierEdit()}
+                showPagination={true}
+                draggableColumns={false}
+                columnOrderKey="c16-supplier-main"
+              />
             </div>
           </ResizablePanel>
 
diff --git a/frontend/app/(main)/COMPANY_16/quality/inspection/page.tsx b/frontend/app/(main)/COMPANY_16/quality/inspection/page.tsx
index 41eab9c1..cacd9d02 100644
--- a/frontend/app/(main)/COMPANY_16/quality/inspection/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/quality/inspection/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-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 { Label } from "@/components/ui/label";
@@ -39,6 +39,7 @@ 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";
@@ -181,6 +182,16 @@ export default function InspectionManagementPage() {
     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"];
@@ -666,99 +677,19 @@ export default function InspectionManagementPage() {
               />
             </div>
             <div className="overflow-hidden rounded-lg border">
-              <Table style={{ tableLayout: "fixed" }}>
-                <TableHeader className="sticky top-0 z-10">
-                  <TableRow className="bg-muted hover:bg-muted">
-                    <TableHead className="w-10">
-                      <Checkbox
-                        checked={inspections.length > 0 && inspChecked.length === inspections.length}
-                        onCheckedChange={(v) => setInspChecked(v ? inspections.map((r) => r.id) : [])}
-                      />
-                    </TableHead>
-                    {ts.visibleColumns.map((col) => (
-                      <TableHead
-                        key={col.key}
-                        style={ts.thStyle(col.key)}
-                        className="text-muted-foreground text-[11px] font-bold tracking-wide uppercase"
-                      >
-                        {col.label}
-                      </TableHead>
-                    ))}
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  {inspLoading ? (
-                    <TableRow>
-                      <TableCell colSpan={ts.visibleColumns.length + 1} className="py-8 text-center">
-                        <Loader2 className="text-muted-foreground mx-auto h-5 w-5 animate-spin" />
-                      </TableCell>
-                    </TableRow>
-                  ) : inspections.length === 0 ? (
-                    <TableRow>
-                      <TableCell
-                        colSpan={ts.visibleColumns.length + 1}
-                        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>
-                  ) : (
-                    inspections.map((row) => (
-                      <TableRow
-                        key={row.id}
-                        className={cn("cursor-pointer", inspChecked.includes(row.id) && "bg-primary/5")}
-                        onClick={() =>
-                          setInspChecked((prev) =>
-                            prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id],
-                          )
-                        }
-                        onDoubleClick={() => openInspEdit(row)}
-                      >
-                        <TableCell onClick={(e) => e.stopPropagation()}>
-                          <Checkbox
-                            checked={inspChecked.includes(row.id)}
-                            onCheckedChange={(v) =>
-                              setInspChecked((prev) => (v ? [...prev, row.id] : prev.filter((id) => id !== row.id)))
-                            }
-                          />
-                        </TableCell>
-                        {ts.visibleColumns.map((col) => {
-                          if (col.key === "inspection_type")
-                            return (
-                              <TableCell key={col.key}>
-                                {getCatLabel(INSPECTION_TABLE, "inspection_type", row.inspection_type)}
-                              </TableCell>
-                            );
-                          if (col.key === "inspection_method")
-                            return (
-                              <TableCell key={col.key}>
-                                {getCatLabel(INSPECTION_TABLE, "inspection_method", row.inspection_method)}
-                              </TableCell>
-                            );
-                          if (col.key === "judgment_criteria")
-                            return (
-                              <TableCell key={col.key}>
-                                {getCatLabel(INSPECTION_TABLE, "judgment_criteria", row.judgment_criteria)}
-                              </TableCell>
-                            );
-                          if (col.key === "unit")
-                            return (
-                              <TableCell key={col.key}>{getCatLabel(INSPECTION_TABLE, "unit", row.unit)}</TableCell>
-                            );
-                          if (col.key === "apply_type")
-                            return (
-                              <TableCell key={col.key}>
-                                {getCatLabel(INSPECTION_TABLE, "apply_type", row.apply_type)}
-                              </TableCell>
-                            );
-                          return <TableCell key={col.key}>{row[col.key] ?? ""}</TableCell>;
-                        })}
-                      </TableRow>
-                    ))
-                  )}
-                </TableBody>
-              </Table>
+              <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>
 
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 dccae8da..d030846f 100644
--- a/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/quality/item-inspection/page.tsx
@@ -20,6 +20,7 @@ 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";
 
@@ -302,48 +303,29 @@ export default function ItemInspectionInfoPage() {
           />
         </div>
         <div className="p-3">
-          <div className="border rounded-lg overflow-hidden">
-            <Table style={{ tableLayout: "fixed" }}>
-              <TableHeader className="sticky top-0 z-10">
-                <TableRow className="bg-muted hover:bg-muted">
-                  <TableHead className="w-10">
-                    <Checkbox
-                      checked={data.length > 0 && checkedIds.length === data.length}
-                      onCheckedChange={(v) => setCheckedIds(v ? data.map(r => r.id) : [])}
-                    />
-                  </TableHead>
-                  {ts.visibleColumns.map((col) => (
-                    <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">{col.label}</TableHead>
-                  ))}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {loading ? (
-                  <TableRow><TableCell colSpan={ts.visibleColumns.length + 1} className="text-center py-8"><Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" /></TableCell></TableRow>
-                ) : data.length === 0 ? (
-                  <TableRow><TableCell colSpan={ts.visibleColumns.length + 1} className="text-center py-10 text-muted-foreground"><Inbox className="w-8 h-8 mx-auto mb-2 opacity-40" /><p className="text-sm">등록된 품목검사정보가 없어요</p></TableCell></TableRow>
-                ) : data.map((row) => (
-                  <TableRow
-                    key={row.id}
-                    className={cn("cursor-pointer", checkedIds.includes(row.id) && "bg-primary/5")}
-                    onClick={() => setCheckedIds(prev => prev.includes(row.id) ? prev.filter(id => id !== row.id) : [...prev, row.id])}
-                    onDoubleClick={() => openEdit(row)}
-                  >
-                    <TableCell onClick={(e) => e.stopPropagation()}>
-                      <Checkbox checked={checkedIds.includes(row.id)} onCheckedChange={(v) => setCheckedIds(prev => v ? [...prev, row.id] : prev.filter(id => id !== row.id))} />
-                    </TableCell>
-                    {ts.visibleColumns.map((col) => (
-                      <TableCell key={col.key} style={ts.thStyle(col.key)}>
-                        {col.key === "is_active"
-                          ? <Badge variant={row.is_active ? "default" : "secondary"} className="text-xs">{row.is_active ? "사용" : "미사용"}</Badge>
-                          : row[col.key] ?? ""}
-                      </TableCell>
-                    ))}
-                  </TableRow>
-                ))}
-              </TableBody>
-            </Table>
-          </div>
+          <EDataTable
+            columns={ts.visibleColumns.map((col): EDataTableColumn => ({
+              key: col.key,
+              label: col.label,
+              render: col.key === "is_active"
+                ? (val: any, row: any) => (
+                    <Badge variant={row.is_active ? "default" : "secondary"} className="text-xs">
+                      {row.is_active ? "사용" : "미사용"}
+                    </Badge>
+                  )
+                : undefined,
+            }))}
+            data={ts.groupData(data)}
+            loading={loading}
+            emptyMessage="등록된 품목검사정보가 없어요"
+            showCheckbox
+            checkedIds={checkedIds}
+            onCheckedChange={setCheckedIds}
+            onRowDoubleClick={(row) => openEdit(row)}
+            showPagination
+            draggableColumns={false}
+            columnOrderKey="c16-item-inspection"
+          />
         </div>
       </div>
 
diff --git a/frontend/app/(main)/COMPANY_16/sales/claim/page.tsx b/frontend/app/(main)/COMPANY_16/sales/claim/page.tsx
index 78b0d1ca..a2c89599 100644
--- a/frontend/app/(main)/COMPANY_16/sales/claim/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/claim/page.tsx
@@ -63,6 +63,7 @@ import {
   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";
@@ -463,91 +464,38 @@ export default function ClaimManagementPage() {
               </div>
 
               {/* 테이블 */}
-              <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <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">#</TableHead>
-                      {ts.visibleColumns.map((col) => (
-                        <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-[11px] font-bold uppercase tracking-wide">
-                          {col.label}
-                        </TableHead>
-                      ))}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {loading && data.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={ts.visibleColumns.length + 1} className="h-32 text-center">
-                          <div className="flex items-center justify-center gap-2 text-muted-foreground">
-                            <Loader2 className="w-4 h-4 animate-spin" />
-                            <span className="text-sm">불러오는 중...</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : data.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={ts.visibleColumns.length + 1} className="h-32 text-center">
-                          <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                            <Inbox className="w-8 h-8 opacity-30" />
-                            <span className="text-sm">등록된 클레임이 없어요</span>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      data.map((claim, idx) => (
-                        <TableRow
-                          key={claim.id}
-                          className={cn(
-                            "cursor-pointer transition-colors",
-                            selectedClaimNo === claim.claim_no
-                              ? "bg-primary/8 border-l-2 border-l-primary"
-                              : "hover:bg-muted/50"
-                          )}
-                          onClick={() => handleRowClick(claim.claim_no)}
-                          onDoubleClick={() => openEditModal(claim.claim_no)}
-                        >
-                          <TableCell className="text-center text-[11px] text-muted-foreground py-2">
-                            {idx + 1}
-                          </TableCell>
-                          {ts.visibleColumns.map((col) => {
-                            if (col.key === "claim_type") {
-                              return (
-                                <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-center py-2">
-                                  <Badge variant={getClaimTypeVariant(claim.claim_type)} className="text-[10px] px-1.5 py-0">
-                                    {claim.claim_type}
-                                  </Badge>
-                                </TableCell>
-                              );
-                            }
-                            if (col.key === "claim_status") {
-                              return (
-                                <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-center py-2">
-                                  <Badge variant={getClaimStatusVariant(claim.claim_status)} className="text-[10px] px-1.5 py-0">
-                                    {claim.claim_status}
-                                  </Badge>
-                                </TableCell>
-                              );
-                            }
-                            if (col.key === "claim_content") {
-                              return (
-                                <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-sm text-muted-foreground py-2 max-w-[200px] truncate">
-                                  {claim.claim_content}
-                                </TableCell>
-                              );
-                            }
-                            return (
-                              <TableCell key={col.key} style={ts.thStyle(col.key)} className="text-sm py-2">
-                                {claim[col.key] ?? "-"}
-                              </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>
 
diff --git a/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx b/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
index f888bddf..1d1b25d1 100644
--- a/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/customer/page.tsx
@@ -24,8 +24,14 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/componen
 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,
+  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";
@@ -35,28 +41,51 @@ import { MultiTableExcelUploadModal } from "@/components/common/MultiTableExcelU
 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: "contact_person", label: "대표자" },
-  { key: "contact_phone", label: "연락처" },
-  { key: "division", 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 } = 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[]>([]);
@@ -65,6 +94,8 @@ export default function CustomerManagementPage() {
   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);
 
@@ -72,11 +103,13 @@ export default function CustomerManagementPage() {
   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 [deliveryLoading, setDeliveryLoading] = useState(false);
 
   // 품목 편집 데이터 (더블클릭 시 상세 입력 모달 재활용)
@@ -109,9 +142,29 @@ export default function CustomerManagementPage() {
   }>>>({});
   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);
@@ -151,6 +204,12 @@ 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 })
@@ -176,21 +235,35 @@ export default function CustomerManagementPage() {
         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) => ({
-        ...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 || "",
+          internal_manager: r.internal_manager
+            ? (employeeOptions.find((e: any) => e.user_id === r.internal_manager)?.user_name || r.internal_manager)
+            : "",
+        };
+      });
+      // 거래처코드 숫자 기준 내림차순 정렬
+      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) {
@@ -199,10 +272,30 @@ 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);
 
   // 선택된 거래처의 품목 단가 조회
@@ -255,24 +348,28 @@ export default function CustomerManagementPage() {
           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>();
-        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 || ""),
@@ -280,7 +377,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 {
@@ -292,8 +403,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 {
@@ -315,12 +425,161 @@ export default function CustomerManagementPage() {
     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) {
+      // 수정 — 로컬 리스트에서 교체
+      setModalContacts((prev) => prev.map((c) =>
+        c._localId === modalContactEditId ? { ...c, ...modalContactForm } : 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) {
+      setModalDeliveries((prev) => prev.map((d) =>
+        (d._localId || d.id) === modalDeliveryEditId ? { ...d, ...modalDeliveryForm } : 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 = () => {
+  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 = () => {
@@ -329,6 +588,29 @@ export default function CustomerManagementPage() {
     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);
   };
 
@@ -344,6 +626,81 @@ 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; }
@@ -355,22 +712,72 @@ export default function CustomerManagementPage() {
     }
     setSaving(true);
     try {
-      const { id, created_date, updated_date, writer, company_code, ...fields } = customerForm;
+      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 {
@@ -382,7 +789,6 @@ export default function CustomerManagementPage() {
   const handleCustomerDelete = async () => {
     if (!selectedCustomerId) return;
     const ok = await confirm("거래처를 삭제하시겠습니까?", {
-      description: "관련된 품목 매핑, 단가, 납품처 정보도 함께 삭제됩니다.",
       variant: "destructive", confirmText: "삭제",
     });
     if (!ok) return;
@@ -453,6 +859,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,
@@ -487,14 +904,29 @@ export default function CustomerManagementPage() {
       [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)) {
+        if (["base_price", "discount_type", "discount_value", "rounding_unit_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));
+          // 절삭/반올림 적용
+          const rv = updated.rounding_unit_value;
+          const roundOpts = priceCategoryOptions["rounding_unit_value"] || [];
+          const roundLabel = roundOpts.find((o) => o.code === rv)?.label || "";
+          if (roundLabel.includes("절삭") || roundLabel.includes("버림") || roundLabel.includes("floor")) {
+            calc = Math.floor(calc);
+          } else if (roundLabel.includes("올림") || roundLabel.includes("ceil")) {
+            calc = Math.ceil(calc);
+          } else if (roundLabel.includes("반올림") || roundLabel.includes("round")) {
+            calc = Math.round(calc);
+          } else if (rv) {
+            // 단위 값 기반 (예: 10원 단위 절삭)
+            const unit = Number(rv);
+            if (!isNaN(unit) && unit > 0) calc = Math.floor(calc / unit) * unit;
+          }
+          updated.calculated_price = String(Math.floor(calc));
         }
         return updated;
       }),
@@ -586,39 +1018,77 @@ export default function CustomerManagementPage() {
         const mappingRows = itemMappings[itemKey] || [];
 
         if (isEditingExisting && editItemData?.id) {
-          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, 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 */ }
 
+          // 매핑 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 */ }
 
+          // 단가 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`, {
-              id: crypto.randomUUID(),
-              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,
@@ -626,6 +1096,25 @@ 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 {
@@ -694,25 +1183,6 @@ export default function CustomerManagementPage() {
     }
   };
 
-  // 납품처 저장
-  const handleDeliverySave = async () => {
-    if (!deliveryForm.destination_name || !selectedCustomer) return;
-    try {
-      await apiClient.post(`/table-management/tables/${DELIVERY_TABLE}/add`, {
-        id: crypto.randomUUID(),
-        ...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;
@@ -750,33 +1220,48 @@ 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("삭제에 실패했습니다.");
-    }
-  };
-
   // 컬럼 가시성 헬퍼
   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,
+    }] : []),
+  ];
+
   // 엑셀 다운로드
   const handleExcelDownload = async () => {
     if (customers.length === 0) return;
@@ -890,14 +1375,18 @@ export default function CustomerManagementPage() {
           <ResizablePanel defaultSize={55} minSize={30}>
             <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 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">
+                <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>
@@ -914,73 +1403,21 @@ export default function CustomerManagementPage() {
               </div>
 
               {/* 거래처 테이블 */}
-              <div className="flex-1 overflow-auto">
-                <Table noWrapper style={{ tableLayout: "fixed" }}>
-                  <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>
-                      {isColumnVisible("customer_code") && <TableHead style={ts.thStyle("customer_code")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처코드</TableHead>}
-                      {isColumnVisible("customer_name") && <TableHead style={ts.thStyle("customer_name")} className="min-w-[160px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>}
-                      {isColumnVisible("contact_person") && <TableHead style={ts.thStyle("contact_person")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">대표자</TableHead>}
-                      {isColumnVisible("contact_phone") && <TableHead style={ts.thStyle("contact_phone")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">연락처</TableHead>}
-                      {isColumnVisible("division") && <TableHead style={ts.thStyle("division")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">유형</TableHead>}
-                      {isColumnVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[70px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {customerLoading ? (
-                      <TableRow>
-                        <TableCell colSpan={customerColSpan} className="text-center py-12">
-                          <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
-                        </TableCell>
-                      </TableRow>
-                    ) : customers.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={customerColSpan} className="text-center py-12 text-muted-foreground text-sm">
-                          등록된 거래처가 없어요
-                        </TableCell>
-                      </TableRow>
-                    ) : customers.map((c, idx) => (
-                      <TableRow
-                        key={c.id}
-                        className={cn(
-                          "cursor-pointer select-none",
-                          selectedCustomerId === c.id ? "bg-primary/10 hover:bg-primary/10" : "hover:bg-muted/50"
-                        )}
-                        onClick={() => setSelectedCustomerId(c.id)}
-                        onDoubleClick={() => { setSelectedCustomerId(c.id); openCustomerEdit(); }}
-                      >
-                        <TableCell className="text-center text-[13px] text-muted-foreground px-2">{idx + 1}</TableCell>
-                        {isColumnVisible("customer_code") && <TableCell style={ts.thStyle("customer_code")} className="text-[13px] font-mono text-muted-foreground">{c.customer_code}</TableCell>}
-                        {isColumnVisible("customer_name") && <TableCell style={ts.thStyle("customer_name")} className="text-sm font-medium">{c.customer_name}</TableCell>}
-                        {isColumnVisible("contact_person") && <TableCell style={ts.thStyle("contact_person")} className="text-[13px] text-muted-foreground">{c.contact_person}</TableCell>}
-                        {isColumnVisible("contact_phone") && <TableCell style={ts.thStyle("contact_phone")} className="text-[13px] text-muted-foreground">{c.contact_phone}</TableCell>}
-                        {isColumnVisible("division") && (
-                          <TableCell style={ts.thStyle("division")} className="text-[13px]">
-                            {c.division && (
-                              <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-normal">
-                                {c.division}
-                              </Badge>
-                            )}
-                          </TableCell>
-                        )}
-                        {isColumnVisible("status") && (
-                          <TableCell style={ts.thStyle("status")} className="text-[13px]">
-                            {c.status && (
-                              <Badge
-                                variant={c.status === "활성" || c.status === "거래중" ? "default" : "outline"}
-                                className="text-[10px] px-1.5 py-0 h-5"
-                              >
-                                {c.status}
-                              </Badge>
-                            )}
-                          </TableCell>
-                        )}
-                      </TableRow>
-                    ))}
-                  </TableBody>
-                </Table>
-              </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>
 
@@ -1000,60 +1437,57 @@ export default function CustomerManagementPage() {
                 </div>
               ) : (
                 <>
-                  {/* 디테일 헤더 */}
-                  <div className="flex items-center gap-3 px-4 py-3 border-b bg-muted shrink-0">
-                    <span className="text-[13px] font-bold">{selectedCustomer?.customer_name || "-"}</span>
-                    <span className="font-mono text-[11px] font-semibold text-primary bg-primary/[0.08] px-2 py-0.5 rounded-full">
-                      {selectedCustomer?.customer_code || "-"}
-                    </span>
-                  </div>
-
-                  {/* 탭 */}
+                  {/* 탭 + 버튼 통합 헤더 */}
                   <Tabs
                     value={rightTab}
                     onValueChange={(v) => setRightTab(v as "items" | "delivery")}
                     className="flex flex-col flex-1 overflow-hidden gap-0"
                   >
-                    <TabsList className="bg-muted w-full justify-start rounded-none border-b border-border/50 p-0 h-auto shrink-0">
-                      <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" /> 거래처별 품목정보
-                      </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-1 text-[10px] px-1.5 py-0">{deliveryItems.length}</Badge>
+                    <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>
                         )}
-                      </TabsTrigger>
-                    </TabsList>
+                      </div>
+                    </div>
 
                     {/* 품목정보 탭 */}
                     <TabsContent value="items" className="flex flex-col flex-1 overflow-hidden mt-0">
-                      <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
-                        <span className="text-xs font-semibold text-muted-foreground">
-                          등록 품목 <span className="text-primary">{priceItems.length}</span>건
-                        </span>
-                        <div className="flex gap-1.5">
-                          <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>
-                        </div>
-                      </div>
-                      <div className="flex-1 overflow-auto">
-                        <Table noWrapper>
+                      <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">
+                            <TableRow className="bg-muted hover:bg-muted h-10">
                               <TableHead className="w-[40px] text-center px-2">
                                 <input
                                   type="checkbox"
@@ -1081,46 +1515,140 @@ export default function CustomerManagementPage() {
                                   <Loader2 className="w-5 h-5 animate-spin mx-auto text-muted-foreground" />
                                 </TableCell>
                               </TableRow>
-                            ) : priceItems.length === 0 ? (
+                            ) : Object.keys(priceGroups).length === 0 ? (
                               <TableRow>
                                 <TableCell colSpan={11} className="text-center py-8 text-muted-foreground text-sm">
                                   등록된 품목이 없어요
                                 </TableCell>
                               </TableRow>
-                            ) : priceItems.map((p) => (
-                              <TableRow
-                                key={p.id}
-                                className={cn("cursor-pointer", priceCheckedIds.includes(p.id) && "bg-primary/5")}
-                                onDoubleClick={() => openEditItem(p)}
-                              >
-                                <TableCell className="text-center px-2">
-                                  <input
-                                    type="checkbox"
-                                    className="rounded"
-                                    checked={priceCheckedIds.includes(p.id)}
-                                    onChange={(e) => {
-                                      if (e.target.checked) setPriceCheckedIds((prev) => [...prev, p.id]);
-                                      else setPriceCheckedIds((prev) => prev.filter((id) => id !== p.id));
+                            ) : 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;
+                                      });
                                     }}
-                                    onClick={(e) => e.stopPropagation()}
-                                  />
-                                </TableCell>
-                                <TableCell className="text-[13px] font-mono text-muted-foreground">{p.item_number}</TableCell>
-                                <TableCell className="text-[13px]">{p.item_name}</TableCell>
-                                <TableCell className="text-[13px]">{p.customer_item_code}</TableCell>
-                                <TableCell className="text-[13px]">{p.customer_item_name}</TableCell>
-                                <TableCell className="text-[13px]">{p.base_price_type}</TableCell>
-                                <TableCell className="text-[13px] text-right">
-                                  {p.base_price ? Number(p.base_price).toLocaleString() : ""}
-                                </TableCell>
-                                <TableCell className="text-[13px]">{p.discount_type}</TableCell>
-                                <TableCell className="text-[13px] text-right">{p.discount_value}</TableCell>
-                                <TableCell className="text-[13px] text-right font-medium">
-                                  {p.calculated_price ? Number(p.calculated_price).toLocaleString() : ""}
-                                </TableCell>
-                                <TableCell className="text-[13px]">{p.currency_code}</TableCell>
-                              </TableRow>
-                            ))}
+                                    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>
@@ -1128,70 +1656,34 @@ export default function CustomerManagementPage() {
 
                     {/* 납품처 탭 */}
                     <TabsContent value="delivery" className="flex flex-col flex-1 overflow-hidden mt-0">
-                      <div className="flex items-center justify-between px-4 py-2.5 border-b shrink-0">
-                        <span className="text-xs font-semibold text-muted-foreground">
-                          등록 납품처 <span className="text-primary">{deliveryItems.length}</span>건
-                        </span>
-                        <div className="flex gap-1.5">
-                          <Button size="sm" onClick={() => { setDeliveryForm({}); setDeliveryModalOpen(true); }}>
-                            <Plus className="w-3.5 h-3.5" /> 납품처 추가
-                          </Button>
-                          <Button variant="destructive" size="sm" disabled={deliveryCheckedIds.length === 0} onClick={handleDeliveryDelete}>
-                            <Trash2 className="w-3.5 h-3.5" /> 삭제
-                          </Button>
-                        </div>
-                      </div>
-                      <div className="flex-1 overflow-auto">
-                        <Table noWrapper>
+                      <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">
-                              <TableHead className="w-[40px] text-center px-2">
-                                <input
-                                  type="checkbox"
-                                  className="rounded"
-                                  checked={deliveryItems.length > 0 && deliveryCheckedIds.length === deliveryItems.length}
-                                  onChange={(e) => setDeliveryCheckedIds(e.target.checked ? deliveryItems.map((d) => d.id) : [])}
-                                />
-                              </TableHead>
+                            <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>
+                              <TableHead className="w-[50px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메인</TableHead>
                             </TableRow>
                           </TableHeader>
                           <TableBody>
                             {deliveryLoading ? (
                               <TableRow>
-                                <TableCell colSpan={8} className="text-center py-8">
+                                <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={8} className="text-center py-8 text-muted-foreground text-sm">
+                                <TableCell colSpan={7} className="text-center py-8 text-muted-foreground text-sm">
                                   등록된 납품처가 없어요
                                 </TableCell>
                               </TableRow>
                             ) : deliveryItems.map((d) => (
-                              <TableRow
-                                key={d.id}
-                                className={cn("cursor-pointer", deliveryCheckedIds.includes(d.id) && "bg-primary/5")}
-                              >
-                                <TableCell className="text-center px-2">
-                                  <input
-                                    type="checkbox"
-                                    className="rounded"
-                                    checked={deliveryCheckedIds.includes(d.id)}
-                                    onChange={(e) => {
-                                      if (e.target.checked) setDeliveryCheckedIds((prev) => [...prev, d.id]);
-                                      else setDeliveryCheckedIds((prev) => prev.filter((id) => id !== d.id));
-                                    }}
-                                    onClick={(e) => e.stopPropagation()}
-                                  />
-                                </TableCell>
+                              <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>
@@ -1200,7 +1692,7 @@ export default function CustomerManagementPage() {
                                 <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>
+                                    <Badge variant="default" className="text-[10px] px-1.5 py-0 h-5">메인</Badge>
                                   )}
                                 </TableCell>
                               </TableRow>
@@ -1217,138 +1709,616 @@ export default function CustomerManagementPage() {
         </ResizablePanelGroup>
       </div>
 
-      {/* ── 모달: 거래처 등록/수정 ── */}
-      <Dialog open={customerModalOpen} onOpenChange={setCustomerModalOpen}>
-        <DialogContent className="max-w-2xl">
-          <DialogHeader>
+      {/* ── 모달: 거래처 등록/수정 (3탭) ── */}
+      <Dialog open={customerModalOpen} onOpenChange={(open) => {
+        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>
-          <div className="grid grid-cols-2 gap-4 py-2">
-            <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>
-              <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>
-              <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>
+                    <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>
+
+                {/* 세금유형 */}
+                <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.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={() => {
+                                  setModalContacts((prev) => prev.map((item) =>
+                                    (item._localId || item.id) === (c._localId || c.id)
+                                      ? { ...item, is_main: (item.is_main === "Y" || item.is_main === true) ? "N" : "Y" }
+                                      : item
+                                  ));
+                                }}
+                              >
+                                {(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={(e) => setModalContactForm((p) => ({ ...p, is_main: e.target.checked ? "Y" : "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={() => {
+                                  setModalDeliveries((prev) => prev.map((item) =>
+                                    (item._localId || item.id) === (d._localId || d.id)
+                                      ? { ...item, is_default: (item.is_default === "Y" || item.is_default === true) ? "N" : "Y" }
+                                      : item
+                                  ));
+                                }}
+                              >
+                                {(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={(e) => setModalDeliveryForm((p) => ({ ...p, is_default: e.target.checked ? "Y" : "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>
-          </DialogFooter>
+          </div>
         </DialogContent>
       </Dialog>
 
@@ -1374,7 +2344,7 @@ export default function CustomerManagementPage() {
           <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">
+                <TableRow className="bg-muted hover:bg-muted h-10">
                   <TableHead className="w-[40px] text-center px-2">
                     <input
                       type="checkbox"
@@ -1439,7 +2409,7 @@ export default function CustomerManagementPage() {
 
       {/* ── 모달: 품목 상세 입력 (2단계) ── */}
       <Dialog open={itemDetailOpen} onOpenChange={setItemDetailOpen}>
-        <DialogContent className="max-w-[1100px] max-h-[90vh] overflow-y-auto">
+        <DialogContent className="max-w-[1100px] h-[85vh] flex flex-col overflow-hidden">
           <DialogHeader>
             <DialogTitle>
               품목 상세정보 {editItemData ? "수정" : "입력"} — {selectedCustomer?.customer_name || ""}
@@ -1450,7 +2420,7 @@ export default function CustomerManagementPage() {
                 : "선택한 품목의 거래처 품번/품명과 기간별 단가를 설정합니다."}
             </DialogDescription>
           </DialogHeader>
-          <div className="space-y-6 py-2">
+          <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] || [];
@@ -1464,10 +2434,10 @@ 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 gap-4 p-5 items-stretch">
                     {/* 좌: 거래처 품번/품명 */}
-                    <div className="flex-1 border rounded-lg p-4 bg-muted/30">
-                      <div className="flex items-center justify-between mb-3">
+                    <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>
@@ -1475,48 +2445,48 @@ export default function CustomerManagementPage() {
                           <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>
-                            ))}
-                          </>
+                          <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-muted/30">
-                      <div className="flex items-center justify-between mb-3">
+                    <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>
@@ -1524,41 +2494,77 @@ export default function CustomerManagementPage() {
                           <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">
-                              <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="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-8 text-xs"><SelectValue placeholder="통화" /></SelectTrigger>
+                                  <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>
@@ -1574,7 +2580,7 @@ export default function CustomerManagementPage() {
                                   value={price.base_price_type}
                                   onValueChange={(v) => updatePriceRow(itemKey, price._id, "base_price_type", v)}
                                 >
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="기준" /></SelectTrigger>
+                                  <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>
@@ -1583,9 +2589,12 @@ export default function CustomerManagementPage() {
                                 </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"
+                                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 flex-1"
                                 placeholder="기준가"
                               />
                               <div className="w-[90px]">
@@ -1593,7 +2602,7 @@ export default function CustomerManagementPage() {
                                   value={price.discount_type}
                                   onValueChange={(v) => updatePriceRow(itemKey, price._id, "discount_type", v)}
                                 >
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="할인" /></SelectTrigger>
+                                  <SelectTrigger className="h-9 text-[13px]"><SelectValue placeholder="할인" /></SelectTrigger>
                                   <SelectContent>
                                     <SelectItem value="none">할인없음</SelectItem>
                                     {(priceCategoryOptions["discount_type"] || []).map((o) => (
@@ -1603,9 +2612,12 @@ export default function CustomerManagementPage() {
                                 </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]"
+                                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 w-[60px]"
                                 placeholder="0"
                               />
                               <div className="w-[90px]">
@@ -1613,7 +2625,7 @@ export default function CustomerManagementPage() {
                                   value={price.rounding_unit_value}
                                   onValueChange={(v) => updatePriceRow(itemKey, price._id, "rounding_unit_value", v)}
                                 >
-                                  <SelectTrigger className="h-8 text-xs"><SelectValue placeholder="반올림" /></SelectTrigger>
+                                  <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>
@@ -1623,12 +2635,18 @@ export default function CustomerManagementPage() {
                               </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">
+                            <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>
@@ -1657,86 +2675,6 @@ export default function CustomerManagementPage() {
         </DialogContent>
       </Dialog>
 
-      {/* ── 모달: 납품처 등록 ── */}
-      <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-2">
-            <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>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-
       {/* 엑셀 업로드 (멀티테이블) */}
       {excelChainConfig && (
         <MultiTableExcelUploadModal
diff --git a/frontend/app/(main)/COMPANY_16/sales/order/page.tsx b/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
index f7a711a0..48ef567f 100644
--- a/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/order/page.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-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";
@@ -9,12 +9,14 @@ 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,
+  ChevronLeft, ChevronRight, ChevronDown, 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";
@@ -40,8 +42,19 @@ const formatNumber = (val: string) => {
 };
 const parseNumber = (val: string) => val.replace(/,/g, "");
 
-const GRID_COLUMNS_CONFIG = [
-  { key: "order_no", label: "수주번호" },
+// 마스터 헤더 레이아웃 (수주번호 뒤, 디테일 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 DETAIL_HEADER_COLS = [
   { key: "part_code", label: "품번" },
   { key: "part_name", label: "품명" },
   { key: "spec", label: "규격" },
@@ -53,9 +66,103 @@ const GRID_COLUMNS_CONFIG = [
   { key: "amount", label: "금액" },
   { key: "currency_code", label: "통화" },
   { key: "due_date", label: "납기일" },
+];
+
+// 필터용 전체 키
+const GRID_COLUMNS_CONFIG = [
+  { key: "order_no", label: "수주번호" },
+  ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label })),
+  ...DETAIL_HEADER_COLS,
   { key: "memo", label: "메모" },
 ];
 
+// 총 컬럼 수: 체크박스(1) + 화살표(1) + 수주번호(1) + 디테일(11) + 메모(1) = 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();
@@ -72,6 +179,9 @@ export default function SalesOrderPage() {
   const [saving, setSaving] = useState(false);
   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);
@@ -104,6 +214,10 @@ export default function SalesOrderPage() {
   // 테이블 설정
   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 () => {
@@ -244,8 +358,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 || {},
         };
       });
 
@@ -260,6 +376,160 @@ 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) => {
+    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 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 masters = Array.from(seenMasters.values());
+    for (const col of [{ key: "order_no", label: "수주번호" }, ...MASTER_BODY_LAYOUT.map(({ key, label }) => ({ key, label })), { key: "memo", label: "메모" }]) {
+      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)));
+        }
+      });
+      result[col.key] = Array.from(values).sort();
+    }
+    return result;
+  }, [orders, resolveMasterLabel]);
+
+  // 헤더 필터 토글/초기화
+  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);
@@ -323,40 +593,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("삭제되었습니다.");
@@ -506,12 +765,12 @@ export default function SalesOrderPage() {
         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: "",
       };
     });
@@ -560,13 +819,6 @@ export default function SalesOrderPage() {
     toast.success("다운로드 완료");
   };
 
-  // 전체 선택/해제
-  const isAllChecked = orders.length > 0 && orders.every((o) => checkedIds.includes(o.id));
-  const toggleAllChecked = () => {
-    if (isAllChecked) setCheckedIds([]);
-    else setCheckedIds(orders.map((o) => o.id).filter(Boolean));
-  };
-
   return (
     <div className="flex h-full flex-col gap-3 p-3">
       {/* 브레드크럼 */}
@@ -632,45 +884,123 @@ export default function SalesOrderPage() {
         </div>
       </div>
 
-      {/* 데이터 테이블 */}
+      {/* 데이터 테이블 (트리 구조) */}
       <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
-        <div className="overflow-auto" style={{ maxHeight: "calc(100vh - 290px)" }}>
-          <Table noWrapper className="w-full" style={{ tableLayout: "fixed" }}>
+        <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" }} />  {/* 메모 */}
+            </colgroup>
             <TableHeader className="sticky top-0 z-10">
               <TableRow className="bg-muted hover:bg-muted">
-                <TableHead className="w-10 pl-4">
-                  <input
-                    type="checkbox"
-                    checked={isAllChecked}
-                    onChange={toggleAllChecked}
-                    className="h-4 w-4 cursor-pointer rounded border-border accent-primary"
+                <TableHead
+                  className="text-center cursor-pointer"
+                  onClick={() => {
+                    const allFilteredIds = Object.values(filteredOrderGroups).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(filteredOrderGroups).flatMap((g) => g.details.map((d) => d.id));
+                      return allFilteredIds.length > 0 && allFilteredIds.every((id) => checkedIds.includes(id));
+                    })()}
+                    onCheckedChange={() => {}}
                   />
                 </TableHead>
-                {ts.isVisible("order_no") && <TableHead style={ts.thStyle("order_no")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead>}
-                {ts.isVisible("part_code") && <TableHead style={ts.thStyle("part_code")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>}
-                {ts.isVisible("part_name") && <TableHead style={ts.thStyle("part_name")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>}
-                {ts.isVisible("spec") && <TableHead style={ts.thStyle("spec")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>}
-                {ts.isVisible("unit") && <TableHead style={ts.thStyle("unit")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>}
-                {ts.isVisible("qty") && <TableHead style={ts.thStyle("qty")} className="text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>}
-                {ts.isVisible("ship_qty") && <TableHead style={ts.thStyle("ship_qty")} className="text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하수량</TableHead>}
-                {ts.isVisible("balance_qty") && <TableHead style={ts.thStyle("balance_qty")} className="text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">잔량</TableHead>}
-                {ts.isVisible("unit_price") && <TableHead style={ts.thStyle("unit_price")} className="text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>}
-                {ts.isVisible("amount") && <TableHead style={ts.thStyle("amount")} className="text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>}
-                {ts.isVisible("currency_code") && <TableHead style={ts.thStyle("currency_code")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>}
-                {ts.isVisible("due_date") && <TableHead style={ts.thStyle("due_date")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>}
-                {ts.isVisible("memo") && <TableHead style={ts.thStyle("memo")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">메모</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" />
+                        )}
+                      </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>
               </TableRow>
             </TableHeader>
             <TableBody>
               {loading ? (
                 <TableRow>
-                  <TableCell colSpan={ts.visibleColumns.length + 1} className="py-16 text-center">
+                  <TableCell colSpan={TOTAL_COLS} className="py-16 text-center">
                     <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
                   </TableCell>
                 </TableRow>
-              ) : orders.length === 0 ? (
+              ) : Object.keys(filteredOrderGroups).length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={ts.visibleColumns.length + 1} className="py-16 text-center">
+                  <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>
@@ -678,49 +1008,200 @@ export default function SalesOrderPage() {
                   </TableCell>
                 </TableRow>
               ) : (
-                orders.map((row) => {
-                  const isChecked = checkedIds.includes(row.id);
+                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;
                   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"
-                      )}
-                      onClick={() => setCheckedIds((prev) =>
-                        prev.includes(row.id) ? prev.filter((id) => id !== row.id) : [...prev, row.id]
-                      )}
-                      onDoubleClick={() => openEditModal(row.order_no)}
-                    >
-                      <TableCell className="pl-4">
-                        <input type="checkbox" checked={isChecked} readOnly className="h-4 w-4 cursor-pointer rounded accent-primary" />
-                      </TableCell>
-                      {ts.isVisible("order_no") && <TableCell style={ts.thStyle("order_no")} className="font-mono text-[13px]">{row.order_no}</TableCell>}
-                      {ts.isVisible("part_code") && (
-                        <TableCell style={ts.thStyle("part_code")} className="max-w-[120px]">
-                          <span className="block truncate font-mono text-[13px]" title={row.part_code}>{row.part_code}</span>
+                    <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>
-                      )}
-                      {ts.isVisible("part_name") && (
-                        <TableCell style={ts.thStyle("part_name")} className="max-w-[150px]">
-                          <span className="block truncate text-sm" title={row.part_name}>{row.part_name}</span>
+                        <TableCell className="text-center">
+                          {isExpanded
+                            ? <ChevronDown className="h-4 w-4 text-muted-foreground" />
+                            : <ChevronRight className="h-4 w-4 text-muted-foreground" />
+                          }
                         </TableCell>
-                      )}
-                      {ts.isVisible("spec") && <TableCell style={ts.thStyle("spec")} className="text-[13px] text-muted-foreground">{row.spec}</TableCell>}
-                      {ts.isVisible("unit") && <TableCell style={ts.thStyle("unit")} className="text-[13px]">{row.unit}</TableCell>}
-                      {ts.isVisible("qty") && <TableCell style={ts.thStyle("qty")} className="text-right font-mono text-[13px]">{row.qty ? Number(row.qty).toLocaleString() : ""}</TableCell>}
-                      {ts.isVisible("ship_qty") && <TableCell style={ts.thStyle("ship_qty")} className="text-right font-mono text-[13px] text-muted-foreground">{row.ship_qty ? Number(row.ship_qty).toLocaleString() : ""}</TableCell>}
-                      {ts.isVisible("balance_qty") && <TableCell style={ts.thStyle("balance_qty")} className="text-right font-mono text-[13px]">{row.balance_qty ? Number(row.balance_qty).toLocaleString() : ""}</TableCell>}
-                      {ts.isVisible("unit_price") && <TableCell style={ts.thStyle("unit_price")} className="text-right font-mono text-[13px]">{row.unit_price ? Number(row.unit_price).toLocaleString() : ""}</TableCell>}
-                      {ts.isVisible("amount") && <TableCell style={ts.thStyle("amount")} className="text-right font-mono text-[13px] font-semibold">{row.amount ? Number(row.amount).toLocaleString() : ""}</TableCell>}
-                      {ts.isVisible("currency_code") && <TableCell style={ts.thStyle("currency_code")} className="text-[13px]">{row.currency_code}</TableCell>}
-                      {ts.isVisible("due_date") && <TableCell style={ts.thStyle("due_date")} className="text-[13px]">{row.due_date}</TableCell>}
-                      {ts.isVisible("memo") && (
-                        <TableCell style={ts.thStyle("memo")} className="max-w-[100px]">
-                          <span className="block truncate text-[13px] text-muted-foreground" title={row.memo}>{row.memo}</span>
+                        {/* 수주번호 */}
+                        <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>
+
+                      {/* 디테일 행 (펼쳤을 때만) */}
+                      {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>
+                        );
+                      })}
+                    </React.Fragment>
                   );
                 })
               )}
@@ -731,7 +1212,7 @@ export default function SalesOrderPage() {
 
       {/* 수주 등록/수정 모달 */}
       <Dialog open={isModalOpen} onOpenChange={setIsModalOpen}>
-        <DialogContent className="flex flex-col gap-0 p-0 max-w-[95vw] w-full" style={{ maxHeight: "92vh" }}>
+        <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 ? "수주 수정" : "수주 등록"}
@@ -805,6 +1286,12 @@ export default function SalesOrderPage() {
                     </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>
 
@@ -913,7 +1400,16 @@ export default function SalesOrderPage() {
                   </div>
                   <div className="space-y-1">
                     <Label className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">통화</Label>
-                    <Input value={masterForm.currency || ""} onChange={(e) => setMasterForm((p) => ({ ...p, currency: e.target.value }))} placeholder="KRW" className="h-9" />
+                    <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>
@@ -958,21 +1454,22 @@ export default function SalesOrderPage() {
                 </div>
               ) : (
                 <div className="overflow-x-auto rounded-lg border border-border">
-                  <Table noWrapper className="w-full">
+                  <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 text-[11px] font-bold uppercase tracking-wide text-muted-foreground">#</TableHead>
-                        <TableHead className="w-28 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>
-                        <TableHead className="w-32 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>
-                        <TableHead className="w-20 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">규격</TableHead>
-                        <TableHead className="w-16 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단위</TableHead>
-                        <TableHead className="w-24 text-right text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기준단가</TableHead>
-                        <TableHead className="w-24 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>
-                        <TableHead className="w-24 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">단가</TableHead>
-                        <TableHead className="w-24 text-right text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">금액</TableHead>
-                        <TableHead className="w-16 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">통화</TableHead>
-                        <TableHead className="w-36 text-[11px] font-bold text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>
-                        <TableHead className="w-10" />
+                        <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>
@@ -986,33 +1483,53 @@ export default function SalesOrderPage() {
                             <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]">{row.unit}</TableCell>
-                          <TableCell className="text-right font-mono text-[13px] text-muted-foreground">
-                            {row.standard_price ? Number(row.standard_price).toLocaleString() : ""}
+                          <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
-                              value={formatNumber(row.qty || "")}
-                              onChange={(e) => updateDetailRow(idx, "qty", parseNumber(e.target.value))}
-                              className="h-8 text-xs text-right font-mono"
+                              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))}
-                              className="h-8 text-xs text-right font-mono"
+                              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() : ""}
-                          </TableCell>
-                          <TableCell>
-                            <Input
-                              value={row.currency_code || ""}
-                              onChange={(e) => updateDetailRow(idx, "currency_code", e.target.value)}
-                              className="h-8 text-xs"
-                            />
+                            {row.amount ? Number(row.amount).toLocaleString() : "0"}
                           </TableCell>
                           <TableCell>
                             <Input
@@ -1022,14 +1539,31 @@ export default function SalesOrderPage() {
                               className="h-8 text-xs"
                             />
                           </TableCell>
-                          <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 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>
                       ))}
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 1ccf6d2c..3c510588 100644
--- a/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/sales-item/page.tsx
@@ -29,6 +29,7 @@ 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";
@@ -605,6 +606,18 @@ 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">
 
@@ -649,58 +662,20 @@ export default function SalesItemPage() {
                 </Button>
               </div>
               {/* 테이블 영역 */}
-              <div className="flex-1 overflow-auto">
-                {itemLoading ? (
-                  <div className="flex items-center justify-center h-full">
-                    <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                  </div>
-                ) : items.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">
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[32px] text-center">#</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[110px]">품번</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground min-w-[130px]">품명</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[80px]">규격</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[60px]">단위</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[90px] text-right">기준단가</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[90px] text-right">판매가격</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[50px]">통화</TableHead>
-                        <TableHead className="sticky top-0 z-10 bg-card text-[11px] font-bold uppercase tracking-wide text-muted-foreground w-[60px]">상태</TableHead>
-                      </TableRow>
-                    </TableHeader>
-                    <TableBody>
-                      {items.map((item, idx) => (
-                        <TableRow
-                          key={item.id}
-                          className={cn(
-                            "cursor-pointer border-l-2 transition-all",
-                            selectedItemId === item.id
-                              ? "bg-primary/[0.08] border-l-primary"
-                              : "border-l-transparent hover:bg-accent"
-                          )}
-                          onClick={() => setSelectedItemId(item.id)}
-                          onDoubleClick={() => openEditItem()}
-                        >
-                          <TableCell className="text-center text-[13px] text-muted-foreground">{idx + 1}</TableCell>
-                          <TableCell className="text-[13px] font-mono text-muted-foreground">{item.item_number}</TableCell>
-                          <TableCell className={cn("text-sm", selectedItemId === item.id ? "font-semibold text-foreground" : "text-foreground")}>{item.item_name}</TableCell>
-                          <TableCell className="text-[13px] text-muted-foreground">{item.size}</TableCell>
-                          <TableCell className="text-[13px] text-muted-foreground">{item.unit}</TableCell>
-                          <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(item.standard_price)}</TableCell>
-                          <TableCell className="text-[13px] text-right font-mono text-muted-foreground">{formatNum(item.selling_price)}</TableCell>
-                          <TableCell className="text-[13px] text-muted-foreground">{item.currency_code}</TableCell>
-                          <TableCell className="text-[13px] text-muted-foreground">{item.status}</TableCell>
-                        </TableRow>
-                      ))}
-                    </TableBody>
-                  </Table>
-                )}
-              </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={false}
+                draggableColumns={false}
+                columnOrderKey="c16-sales-item"
+              />
             </div>
           </ResizablePanel>
 
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 86ab3f0d..4ab5a9ad 100644
--- a/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/shipping-order/page.tsx
@@ -25,6 +25,7 @@ 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: "출하지시번호" },
@@ -201,10 +202,6 @@ export default function ShippingOrderPage() {
     }
   }, [isModalOpen, dataSource]);
 
-  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;
@@ -392,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: "수주정보 목록",
@@ -454,138 +515,42 @@ export default function ShippingOrderPage() {
 
       {/* 메인 테이블 */}
       <div className="flex-1 overflow-hidden rounded-lg border bg-card flex flex-col">
-        <div className="flex-1 overflow-auto">
-          {loading ? (
-            <div className="flex items-center justify-center h-32">
-              <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-            </div>
-          ) : (
-            <Table style={{ tableLayout: "fixed" }}>
-              <TableHeader className="sticky top-0 z-10">
-                <TableRow className="bg-muted hover:bg-muted">
-                  <TableHead className="w-[40px] text-center">
-                    <Checkbox
-                      checked={orders.length > 0 && checkedIds.length === orders.length}
-                      onCheckedChange={handleCheckAll}
-                    />
-                  </TableHead>
-                  {ts.isVisible("instruction_no") && <TableHead style={ts.thStyle("instruction_no")} className="w-[140px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하지시번호</TableHead>}
-                  {ts.isVisible("ship_date") && <TableHead style={ts.thStyle("ship_date")} className="w-[100px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">출하일자</TableHead>}
-                  {ts.isVisible("customer_name") && <TableHead style={ts.thStyle("customer_name")} className="w-[120px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처명</TableHead>}
-                  {ts.isVisible("transport_company") && <TableHead style={ts.thStyle("transport_company")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">운송업체</TableHead>}
-                  {ts.isVisible("vehicle_no") && <TableHead style={ts.thStyle("vehicle_no")} className="w-[90px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">차량번호</TableHead>}
-                  {ts.isVisible("driver_name") && <TableHead style={ts.thStyle("driver_name")} className="w-[80px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">기사명</TableHead>}
-                  {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                  {ts.isVisible("item_code") && <TableHead style={ts.thStyle("item_code")} className="w-[100px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품번</TableHead>}
-                  {ts.isVisible("item_name") && <TableHead style={ts.thStyle("item_name")} className="w-[130px] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품명</TableHead>}
-                  {ts.isVisible("qty") && <TableHead style={ts.thStyle("qty")} className="w-[70px] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수량</TableHead>}
-                  {ts.isVisible("source_type") && <TableHead style={ts.thStyle("source_type")} className="w-[80px] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">소스</TableHead>}
-                  {ts.isVisible("remark") && <TableHead style={ts.thStyle("remark")} className="text-[11px] font-bold uppercase tracking-wide text-muted-foreground">비고</TableHead>}
-                </TableRow>
-              </TableHeader>
-              <TableBody>
-                {orders.length === 0 ? (
-                  <TableRow>
-                    <TableCell colSpan={13} className="h-40 text-center">
-                      <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                        <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
-                          <Inbox className="w-5 h-5 text-muted-foreground/30" />
-                        </div>
-                        <p className="text-sm font-medium">등록된 출하지시가 없어요</p>
-                        <p className="text-xs text-muted-foreground/60">출하지시 등록 버튼으로 등록해주세요</p>
-                      </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 transition-colors", 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>
-                          {ts.isVisible("instruction_no") && <TableCell style={ts.thStyle("instruction_no")} className="font-medium text-sm">{order.instruction_no}</TableCell>}
-                          {ts.isVisible("ship_date") && <TableCell style={ts.thStyle("ship_date")} className="text-center text-sm">{formatDate(order.instruction_date)}</TableCell>}
-                          {ts.isVisible("customer_name") && <TableCell style={ts.thStyle("customer_name")} className="text-sm">{order.customer_name || "-"}</TableCell>}
-                          {ts.isVisible("transport_company") && <TableCell style={ts.thStyle("transport_company")} className="text-sm">{order.carrier_name || "-"}</TableCell>}
-                          {ts.isVisible("vehicle_no") && <TableCell style={ts.thStyle("vehicle_no")} className="text-sm">{order.vehicle_no || "-"}</TableCell>}
-                          {ts.isVisible("driver_name") && <TableCell style={ts.thStyle("driver_name")} className="text-sm">{order.driver_name || "-"}</TableCell>}
-                          {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="text-center">
-                            <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(order.status))}>
-                              {getStatusLabel(order.status)}
-                            </span>
-                          </TableCell>}
-                          {ts.isVisible("item_code") && <TableCell style={ts.thStyle("item_code")} className="text-sm">-</TableCell>}
-                          {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="text-sm">-</TableCell>}
-                          {ts.isVisible("qty") && <TableCell style={ts.thStyle("qty")} className="text-right text-sm">0</TableCell>}
-                          {ts.isVisible("source_type") && <TableCell style={ts.thStyle("source_type")} className="text-center text-sm">-</TableCell>}
-                          {ts.isVisible("remark") && <TableCell style={ts.thStyle("remark")} className="text-[13px] 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 transition-colors", 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>
-                        {ts.isVisible("instruction_no") && <TableCell style={ts.thStyle("instruction_no")} className="font-medium text-sm">{itemIdx === 0 ? order.instruction_no : ""}</TableCell>}
-                        {ts.isVisible("ship_date") && <TableCell style={ts.thStyle("ship_date")} className="text-center text-sm">{itemIdx === 0 ? formatDate(order.instruction_date) : ""}</TableCell>}
-                        {ts.isVisible("customer_name") && <TableCell style={ts.thStyle("customer_name")} className="text-sm">{itemIdx === 0 ? (order.customer_name || "-") : ""}</TableCell>}
-                        {ts.isVisible("transport_company") && <TableCell style={ts.thStyle("transport_company")} className="text-sm">{itemIdx === 0 ? (order.carrier_name || "-") : ""}</TableCell>}
-                        {ts.isVisible("vehicle_no") && <TableCell style={ts.thStyle("vehicle_no")} className="text-sm">{itemIdx === 0 ? (order.vehicle_no || "-") : ""}</TableCell>}
-                        {ts.isVisible("driver_name") && <TableCell style={ts.thStyle("driver_name")} className="text-sm">{itemIdx === 0 ? (order.driver_name || "-") : ""}</TableCell>}
-                        {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="text-center">
-                          {itemIdx === 0 && (
-                            <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", getStatusColor(order.status))}>
-                              {getStatusLabel(order.status)}
-                            </span>
-                          )}
-                        </TableCell>}
-                        {ts.isVisible("item_code") && <TableCell style={ts.thStyle("item_code")} className="text-[13px] text-muted-foreground">{item.item_code}</TableCell>}
-                        {ts.isVisible("item_name") && <TableCell style={ts.thStyle("item_name")} className="font-medium text-sm">{item.item_name}</TableCell>}
-                        {ts.isVisible("qty") && <TableCell style={ts.thStyle("qty")} className="text-right text-sm">{Number(item.order_qty || 0).toLocaleString()}</TableCell>}
-                        {ts.isVisible("source_type") && <TableCell style={ts.thStyle("source_type")} className="text-center">
-                          {(() => {
-                            const b = getSourceBadge(item.source_type || "");
-                            return <span className={cn("px-2 py-0.5 rounded-full text-[10px] font-medium", b.cls)}>{b.label}</span>;
-                          })()}
-                        </TableCell>}
-                        {ts.isVisible("remark") && <TableCell style={ts.thStyle("remark")} className="text-[13px] text-muted-foreground truncate max-w-[100px]">
-                          {itemIdx === 0 ? (order.memo || "-") : ""}
-                        </TableCell>}
-                      </TableRow>
-                    ));
-                  })
-                )}
-              </TableBody>
-            </Table>
-          )}
-        </div>
+        <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>
 
       {/* 등록/수정 모달 */}
diff --git a/frontend/app/(main)/COMPANY_16/sales/shipping-plan/page.tsx b/frontend/app/(main)/COMPANY_16/sales/shipping-plan/page.tsx
index 1a47e986..747ac23d 100644
--- a/frontend/app/(main)/COMPANY_16/sales/shipping-plan/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/sales/shipping-plan/page.tsx
@@ -18,6 +18,7 @@ import {
 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: "수주번호" },
@@ -114,10 +115,11 @@ export default function ShippingPlanPage() {
   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);
@@ -128,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) {
@@ -233,91 +235,36 @@ export default function ShippingPlanPage() {
 
               {/* 테이블 */}
               <div className="flex-1 overflow-auto">
-                <Table style={{ tableLayout: "fixed" }}>
-                  <TableHeader className="sticky top-0 z-10">
-                    <TableRow className="bg-muted hover:bg-muted">
-                      <TableHead className="w-[40px] text-center">
-                        <Checkbox
-                          checked={data.length > 0 && checkedIds.length === data.filter(p => p.status !== "CANCELLED").length}
-                          onCheckedChange={handleCheckAll}
-                        />
-                      </TableHead>
-                      {ts.isVisible("order_no") && <TableHead style={ts.thStyle("order_no")} className="w-[10%] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주번호</TableHead>}
-                      {ts.isVisible("due_date") && <TableHead style={ts.thStyle("due_date")} className="w-[8%] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">납기일</TableHead>}
-                      {ts.isVisible("customer_name") && <TableHead style={ts.thStyle("customer_name")} className="w-[12%] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">거래처</TableHead>}
-                      {ts.isVisible("part_code") && <TableHead style={ts.thStyle("part_code")} className="w-[18%] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>}
-                      {ts.isVisible("part_name") && <TableHead style={ts.thStyle("part_name")} className="w-[18%] text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>}
-                      {ts.isVisible("order_qty") && <TableHead style={ts.thStyle("order_qty")} className="w-[7%] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">수주수량</TableHead>}
-                      {ts.isVisible("plan_qty") && <TableHead style={ts.thStyle("plan_qty")} className="w-[7%] text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획수량</TableHead>}
-                      {ts.isVisible("plan_date") && <TableHead style={ts.thStyle("plan_date")} className="w-[8%] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">계획일</TableHead>}
-                      {ts.isVisible("status") && <TableHead style={ts.thStyle("status")} className="w-[6%] text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">상태</TableHead>}
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
-                    {groupedData.length === 0 ? (
-                      <TableRow>
-                        <TableCell colSpan={10} className="h-40 text-center">
-                          <div className="flex flex-col items-center gap-2 text-muted-foreground">
-                            <div className="w-12 h-12 rounded-full border-2 border-dashed border-muted-foreground/20 flex items-center justify-center">
-                              <Inbox className="w-5 h-5 text-muted-foreground/30" />
-                            </div>
-                            <p className="text-sm font-medium">출하계획이 없어요</p>
-                            <p className="text-xs text-muted-foreground/60">조건을 변경해서 다시 조회해주세요</p>
-                          </div>
-                        </TableCell>
-                      </TableRow>
-                    ) : (
-                      groupedData.map(group =>
-                        group.plans.map((plan, planIdx) => (
-                          <TableRow
-                            key={plan.id}
-                            className={cn(
-                              "cursor-pointer transition-colors",
-                              selectedId === plan.id && "bg-primary/5",
-                              plan.status === "CANCELLED" && "opacity-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>
-                            {ts.isVisible("order_no") && <TableCell style={ts.thStyle("order_no")} className="font-medium text-sm">
-                              {planIdx === 0 ? (plan.order_no || "-") : ""}
-                            </TableCell>}
-                            {ts.isVisible("due_date") && <TableCell style={ts.thStyle("due_date")} className="text-center text-sm">
-                              {planIdx === 0 ? formatDate(plan.due_date) : ""}
-                            </TableCell>}
-                            {ts.isVisible("customer_name") && <TableCell style={ts.thStyle("customer_name")} className="text-sm">
-                              {planIdx === 0 ? (plan.customer_name || "-") : ""}
-                            </TableCell>}
-                            {ts.isVisible("part_code") && <TableCell style={ts.thStyle("part_code")} className="text-muted-foreground text-[13px]">{plan.part_code || "-"}</TableCell>}
-                            {ts.isVisible("part_name") && <TableCell style={ts.thStyle("part_name")} className="font-medium text-sm">{plan.part_name || "-"}</TableCell>}
-                            {ts.isVisible("order_qty") && <TableCell style={ts.thStyle("order_qty")} className="text-right text-sm">{formatNumber(plan.order_qty)}</TableCell>}
-                            {ts.isVisible("plan_qty") && <TableCell style={ts.thStyle("plan_qty")} className="text-right font-semibold text-primary text-sm">{formatNumber(plan.plan_qty)}</TableCell>}
-                            {ts.isVisible("plan_date") && <TableCell style={ts.thStyle("plan_date")} className="text-center text-sm">{formatDate(plan.plan_date)}</TableCell>}
-                            {ts.isVisible("status") && <TableCell style={ts.thStyle("status")} className="text-center">
-                              <span className={cn("px-2 py-0.5 rounded-full text-[11px] font-medium", 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>
diff --git a/frontend/app/globals.css b/frontend/app/globals.css
index 3fe6de24..84827d72 100644
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -1068,11 +1068,11 @@ body span.messenger-time {
   background-color: hsl(var(--primary)) !important;
 }
 
-/* 짝수 행 stripe — 행 구분 */
-[data-slot="table-body"] [data-slot="table-row"]:nth-child(even) {
+/* 짝수 행 stripe — 트리 행(master/detail)과 선택 행은 제외 */
+[data-slot="table-body"] [data-slot="table-row"]:not(.tree-master-row):not(.tree-detail-row):not(.row-selected):nth-child(even) {
   background-color: hsl(var(--muted) / 0.35);
 }
-.dark [data-slot="table-body"] [data-slot="table-row"]:nth-child(even) {
+.dark [data-slot="table-body"] [data-slot="table-row"]:not(.tree-master-row):not(.tree-detail-row):not(.row-selected):nth-child(even) {
   background-color: hsl(var(--muted) / 0.18);
 }
 
@@ -1080,3 +1080,63 @@ body span.messenger-time {
 [data-slot="table-body"] [data-slot="table-row"]:hover {
   background-color: hsl(var(--accent)) !important;
 }
+
+/* ===== 트리 테이블 마스터/디테일 구분 ===== */
+/* 마스터 행 — 좌측 primary 바 */
+.tree-master-row {
+  border-left: 3px solid hsl(var(--primary) / 0.5) !important;
+}
+.tree-master-row:hover {
+  background-color: hsl(var(--accent)) !important;
+}
+
+/* 디테일 행 — 펼치기 애니메이션 */
+.tree-detail-row {
+  border-left: 3px solid hsl(var(--border)) !important;
+  animation: treeSlideIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.tree-detail-row:hover {
+  background-color: hsl(var(--accent)) !important;
+}
+
+@keyframes treeSlideIn {
+  from { opacity: 0; transform: translateY(-6px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+
+/* 접기 애니메이션 */
+.tree-detail-row-closing {
+  border-left: 3px solid hsl(var(--border)) !important;
+  animation: treeSlideOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+}
+
+@keyframes treeSlideOut {
+  from { opacity: 1; transform: translateY(0); }
+  to { opacity: 0; transform: translateY(-4px); max-height: 0; }
+}
+
+/* ㄴ자 트리 경계선 */
+.tree-connector {
+  position: absolute;
+  left: 50%;
+  top: 0;
+  width: 12px;
+  height: 50%;
+  border-left: 1.5px solid hsl(var(--muted-foreground) / 0.3);
+  border-bottom: 1.5px solid hsl(var(--muted-foreground) / 0.3);
+  border-bottom-left-radius: 4px;
+}
+/* 마지막 디테일이 아닌 행 — 세로선 아래로 연장 */
+.tree-connector[data-last="false"]::after {
+  content: '';
+  position: absolute;
+  left: -1.5px;
+  top: 50%;
+  bottom: -100%;
+  width: 0;
+  border-left: 1.5px solid hsl(var(--muted-foreground) / 0.3);
+}
+/* 마지막 디테일 행 — 세로선 중간까지만 */
+.tree-connector[data-last="true"] {
+  height: 50%;
+}
diff --git a/frontend/components/common/DynamicSearchFilter.tsx b/frontend/components/common/DynamicSearchFilter.tsx
index 7e3316d2..28a57567 100644
--- a/frontend/components/common/DynamicSearchFilter.tsx
+++ b/frontend/components/common/DynamicSearchFilter.tsx
@@ -147,7 +147,10 @@ export function DynamicSearchFilter({
         }
 
         setAllColumns(merged);
-        setActiveFilters(merged.filter((c) => c.enabled));
+        // externalFilterConfig가 있으면 외부 설정이 activeFilters를 관리하므로 건드리지 않음
+        if (!externalFilterConfig) {
+          setActiveFilters(merged.filter((c) => c.enabled));
+        }
 
         // 저장된 필터 값 복원
         const savedValues = localStorage.getItem(STORAGE_KEY_VALUES);
diff --git a/frontend/components/common/EDataTable.tsx b/frontend/components/common/EDataTable.tsx
new file mode 100644
index 00000000..526d9117
--- /dev/null
+++ b/frontend/components/common/EDataTable.tsx
@@ -0,0 +1,821 @@
+"use client";
+
+/**
+ * EDataTable — 직접 구현 페이지용 공통 데이터 테이블 컴포넌트
+ *
+ * 프리셋 디자인 규격(Type A~F) 기반, shadcn/ui 위에 구축.
+ * 기능: 정렬, 헤더 필터, 컬럼 드래그 이동, 인라인 편집, 체크박스, 페이지네이션
+ */
+
+import React, { useState, useEffect, useRef, useCallback, useMemo } from "react";
+import {
+  DndContext, closestCenter, PointerSensor, useSensor, useSensors, DragEndEvent,
+} from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, useSortable, arrayMove } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Badge } from "@/components/ui/badge";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { Input } from "@/components/ui/input";
+import {
+  Filter, Check, Search, X, Loader2, Inbox, GripVertical,
+  ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight, ArrowUp, ArrowDown,
+} from "lucide-react";
+import { cn } from "@/lib/utils";
+import { toast } from "sonner";
+import { apiClient } from "@/lib/api/client";
+
+// ─── 타입 ───
+
+export interface EDataTableColumn<T = any> {
+  key: string;
+  label: string;
+  width?: string;
+  minWidth?: string;
+  align?: "left" | "center" | "right";
+  sortable?: boolean;
+  filterable?: boolean;
+  editable?: boolean;
+  inputType?: "text" | "number" | "date" | "select";
+  selectOptions?: { value: string; label: string }[];
+  formatNumber?: boolean;
+  truncate?: boolean;
+  render?: (value: any, row: T, rowIndex: number) => React.ReactNode;
+}
+
+export interface SortState {
+  key: string;
+  direction: "asc" | "desc";
+}
+
+export interface EDataTableProps<T extends Record<string, any> = any> {
+  columns: EDataTableColumn<T>[];
+  data: T[];
+  rowKey?: (row: T) => string;
+
+  loading?: boolean;
+  emptyMessage?: string;
+  emptyIcon?: React.ReactNode;
+
+  selectedId?: string | null;
+  onSelect?: (id: string | null) => void;
+
+  showCheckbox?: boolean;
+  checkedIds?: string[];
+  onCheckedChange?: (ids: string[]) => void;
+
+  onRowClick?: (row: T, index: number) => void;
+  onRowDoubleClick?: (row: T, index: number) => void;
+
+  onCellEdit?: (rowId: string, columnKey: string, newValue: any, row: T) => void;
+  tableName?: string;
+
+  sort?: SortState | null;
+  onSortChange?: (sort: SortState | null) => void;
+
+  draggableColumns?: boolean;
+  onColumnOrderChange?: (columns: EDataTableColumn<T>[]) => void;
+  columnOrderKey?: string;
+
+  showRowNumber?: boolean;
+  showPagination?: boolean;
+  defaultPageSize?: number;
+
+  className?: string;
+}
+
+// ─── 유틸 ───
+
+const fmtNum = (val: any) => {
+  if (val == null || val === "") return "";
+  const n = Number(String(val).replace(/,/g, ""));
+  if (isNaN(n)) return String(val);
+  return n.toLocaleString();
+};
+
+const getRowId = (row: any, rowKey?: (row: any) => string) => {
+  if (rowKey) return rowKey(row);
+  return row.id ?? row._id ?? "";
+};
+
+// ─── SortableHeaderCell ───
+
+function SortableHeaderCell({
+  col, sortKey, sortDir, onSort,
+  headerFilterValues, uniqueValues, onToggleFilter, onClearFilter,
+  draggable,
+}: {
+  col: EDataTableColumn;
+  sortKey: string | null;
+  sortDir: "asc" | "desc";
+  onSort: (key: string) => void;
+  headerFilterValues: Set<string>;
+  uniqueValues: string[];
+  onToggleFilter: (colKey: string, value: string) => void;
+  onClearFilter: (colKey: string) => void;
+  draggable: boolean;
+}) {
+  const [filterSearch, setFilterSearch] = useState("");
+  const {
+    attributes, listeners, setNodeRef, transform, transition, isDragging,
+  } = useSortable({ id: col.key, disabled: !draggable });
+
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.5 : 1,
+  };
+
+  const isSorted = sortKey === col.key;
+  const hasFilter = headerFilterValues.size > 0;
+  const filteredUniqueValues = uniqueValues.filter(
+    (v) => !filterSearch || v.toLowerCase().includes(filterSearch.toLowerCase())
+  );
+
+  return (
+    <TableHead
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        col.width, col.minWidth,
+        "text-[11px] font-bold uppercase tracking-wide text-muted-foreground select-none relative overflow-hidden",
+        col.align === "right" && "text-right",
+        col.align === "center" && "text-center",
+      )}
+    >
+      <div className={cn(
+        "inline-flex items-center gap-1",
+        col.align === "right" && "justify-end w-full",
+        col.align === "center" && "justify-center w-full",
+      )}>
+        {/* 드래그 핸들 */}
+        {draggable && (
+          <div
+            {...attributes}
+            {...listeners}
+            className="cursor-grab text-muted-foreground/40 hover:text-muted-foreground shrink-0"
+          >
+            <GripVertical className="h-3 w-3" />
+          </div>
+        )}
+
+        {/* 컬럼 라벨 + 정렬 */}
+        <div
+          className="flex items-center gap-1 cursor-pointer min-w-0"
+          onClick={(e) => {
+            e.stopPropagation();
+            if (col.sortable !== false) onSort(col.key);
+          }}
+        >
+          <span className="truncate">{col.label}</span>
+          {isSorted && (
+            sortDir === "asc"
+              ? <ArrowUp className="h-3 w-3 text-primary shrink-0" />
+              : <ArrowDown className="h-3 w-3 text-primary shrink-0" />
+          )}
+        </div>
+
+        {/* 필터 아이콘 + Popover */}
+        {col.filterable !== false && uniqueValues.length > 0 && (
+          <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">필터: {col.label}</span>
+                  {hasFilter && (
+                    <button onClick={() => onClearFilter(col.key)} 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">
+                  {filteredUniqueValues.slice(0, 100).map((val) => {
+                    const isSelected = headerFilterValues.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={() => onToggleFilter(col.key, 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>
+                    );
+                  })}
+                  {filteredUniqueValues.length > 100 && (
+                    <div className="text-muted-foreground px-2 py-1 text-xs">
+                      ...외 {filteredUniqueValues.length - 100}개
+                    </div>
+                  )}
+                </div>
+              </div>
+            </PopoverContent>
+          </Popover>
+        )}
+      </div>
+    </TableHead>
+  );
+}
+
+// ─── EDataTable ───
+
+export function EDataTable<T extends Record<string, any> = any>({
+  columns: initialColumns,
+  data,
+  rowKey,
+  loading = false,
+  emptyMessage = "데이터가 없어요",
+  emptyIcon,
+  selectedId,
+  onSelect,
+  showCheckbox = false,
+  checkedIds = [],
+  onCheckedChange,
+  onRowClick,
+  onRowDoubleClick,
+  onCellEdit,
+  tableName,
+  sort: externalSort,
+  onSortChange,
+  draggableColumns = true,
+  onColumnOrderChange,
+  columnOrderKey,
+  showRowNumber = false,
+  showPagination = true,
+  defaultPageSize = 50,
+  className,
+}: EDataTableProps<T>) {
+  const [columns, setColumns] = useState(initialColumns);
+  useEffect(() => { setColumns(initialColumns); }, [initialColumns]);
+
+  // 정렬
+  const [internalSort, setInternalSort] = useState<SortState | null>(null);
+  const sortState = externalSort !== undefined ? externalSort : internalSort;
+
+  // 헤더 필터
+  const [headerFilters, setHeaderFilters] = useState<Record<string, Set<string>>>({});
+
+  // 페이지네이션
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(defaultPageSize);
+  const [pageSizeInput, setPageSizeInput] = useState(String(defaultPageSize));
+
+  // 인라인 편집
+  const [editingCell, setEditingCell] = useState<{ rowId: string; colKey: string } | null>(null);
+  const [editValue, setEditValue] = useState("");
+  const editRef = useRef<HTMLInputElement | HTMLSelectElement>(null);
+
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 8 } })
+  );
+
+  // localStorage에서 컬럼 순서 복원
+  useEffect(() => {
+    if (!columnOrderKey) return;
+    const saved = localStorage.getItem(`edatatable_col_order_${columnOrderKey}`);
+    if (saved) {
+      try {
+        const order = JSON.parse(saved) as string[];
+        const reordered = order
+          .map((key) => initialColumns.find((c) => c.key === key))
+          .filter(Boolean) as EDataTableColumn<T>[];
+        const remaining = initialColumns.filter((c) => !order.includes(c.key));
+        setColumns([...reordered, ...remaining]);
+      } catch { /* skip */ }
+    }
+  }, [columnOrderKey]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // 컬럼별 고유값
+  const columnUniqueValues = useMemo(() => {
+    const result: Record<string, string[]> = {};
+    for (const col of columns) {
+      if (col.filterable === false) continue;
+      const values = new Set<string>();
+      data.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;
+  }, [data, columns]);
+
+  // 드래그 완료
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    setColumns((prev) => {
+      const oldIndex = prev.findIndex((c) => c.key === active.id);
+      const newIndex = prev.findIndex((c) => c.key === over.id);
+      const next = arrayMove(prev, oldIndex, newIndex);
+      if (columnOrderKey) {
+        localStorage.setItem(`edatatable_col_order_${columnOrderKey}`, JSON.stringify(next.map((c) => c.key)));
+      }
+      onColumnOrderChange?.(next);
+      return next;
+    });
+  };
+
+  // 정렬
+  const handleSort = (key: string) => {
+    const newSort: SortState | null = sortState?.key === key
+      ? sortState.direction === "asc"
+        ? { key, direction: "desc" }
+        : null
+      : { key, direction: "asc" };
+
+    if (onSortChange) {
+      onSortChange(newSort);
+    } else {
+      setInternalSort(newSort);
+    }
+  };
+
+  // 헤더 필터
+  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 processedData = useMemo(() => {
+    let result = [...data];
+
+    // 헤더 필터
+    if (Object.keys(headerFilters).length > 0) {
+      result = result.filter((row) =>
+        Object.entries(headerFilters).every(([colKey, values]) => {
+          if (values.size === 0) return true;
+          const cellVal = row[colKey] != null ? String(row[colKey]) : "";
+          return values.has(cellVal);
+        })
+      );
+    }
+
+    // 정렬 (외부 정렬이 아닌 경우만)
+    if (sortState && !onSortChange) {
+      const { key, direction } = sortState;
+      result.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 result;
+  }, [data, headerFilters, sortState, onSortChange]);
+
+  // 필터/데이터 변경 시 1페이지 리셋
+  useEffect(() => { setCurrentPage(1); }, [data, headerFilters]);
+
+  // 페이지네이션
+  const totalItems = processedData.length;
+  const totalPages = Math.max(1, Math.ceil(totalItems / pageSize));
+  const safePage = Math.min(currentPage, totalPages);
+
+  useEffect(() => {
+    if (currentPage > totalPages) setCurrentPage(totalPages);
+  }, [currentPage, totalPages]);
+
+  const pageOffset = (safePage - 1) * pageSize;
+  const paginatedData = showPagination
+    ? processedData.slice(pageOffset, pageOffset + pageSize)
+    : processedData;
+
+  const applyPageSize = () => {
+    const n = parseInt(pageSizeInput, 10);
+    if (!isNaN(n) && n >= 1) {
+      setPageSize(n);
+      setCurrentPage(1);
+      setPageSizeInput(String(n));
+    } else {
+      setPageSizeInput(String(pageSize));
+    }
+  };
+
+  const getPageNumbers = () => {
+    const delta = 2;
+    let start = Math.max(1, safePage - delta);
+    let end = Math.min(totalPages, safePage + delta);
+    if (end - start < delta * 2) {
+      if (start === 1) end = Math.min(totalPages, start + delta * 2);
+      else if (end === totalPages) start = Math.max(1, end - delta * 2);
+    }
+    const pages: (number | "...")[] = [];
+    if (start > 1) { pages.push(1); if (start > 2) pages.push("..."); }
+    for (let i = start; i <= end; i++) pages.push(i);
+    if (end < totalPages) { if (end < totalPages - 1) pages.push("..."); pages.push(totalPages); }
+    return pages;
+  };
+
+  // 인라인 편집
+  const startEdit = (rowId: string, colKey: string, currentVal: any) => {
+    const col = columns.find((c) => c.key === colKey);
+    if (!col?.editable) return;
+    setEditingCell({ rowId, colKey });
+    setEditValue(currentVal != null ? String(currentVal) : "");
+  };
+
+  const saveEdit = useCallback(async () => {
+    if (!editingCell) return;
+    const { rowId, colKey } = editingCell;
+    const row = paginatedData.find((r) => getRowId(r, rowKey) === rowId);
+    if (!row) { setEditingCell(null); return; }
+
+    const originalVal = String(row[colKey] ?? "");
+    if (originalVal === editValue) { setEditingCell(null); return; }
+
+    if (tableName && row.id) {
+      try {
+        await apiClient.put(`/table-management/tables/${tableName}/edit`, {
+          originalData: { id: row.id },
+          updatedData: { [colKey]: editValue || null },
+        });
+        (row as any)[colKey] = editValue;
+        toast.success("저장되었어요");
+      } catch {
+        toast.error("저장에 실패했어요");
+        setEditingCell(null);
+        return;
+      }
+    }
+
+    onCellEdit?.(rowId, colKey, editValue, row as T);
+    setEditingCell(null);
+  }, [editingCell, editValue, paginatedData, tableName, onCellEdit, rowKey]);
+
+  const cancelEdit = () => setEditingCell(null);
+
+  const handleEditKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === "Enter") { e.preventDefault(); saveEdit(); }
+    else if (e.key === "Escape") { e.preventDefault(); cancelEdit(); }
+    else if (e.key === "Tab") { e.preventDefault(); saveEdit(); }
+  };
+
+  useEffect(() => {
+    if (editingCell && editRef.current) {
+      editRef.current.focus();
+      if ("select" in editRef.current) editRef.current.select();
+    }
+  }, [editingCell]);
+
+  // 체크박스
+  const allChecked = processedData.length > 0 && checkedIds.length === processedData.length;
+
+  // colSpan 계산
+  const colSpan = columns.length + (showCheckbox ? 1 : 0) + (showRowNumber ? 1 : 0);
+
+  // 셀 렌더링
+  const renderCell = (row: T, col: EDataTableColumn<T>, rowIdx: number) => {
+    const id = getRowId(row, rowKey);
+    const isEditing = editingCell?.rowId === id && editingCell?.colKey === col.key;
+    const val = row[col.key];
+
+    // 편집 모드
+    if (isEditing) {
+      if (col.inputType === "select" && col.selectOptions) {
+        return (
+          <select
+            ref={editRef as any}
+            value={editValue}
+            onChange={(e) => setEditValue(e.target.value)}
+            onKeyDown={handleEditKeyDown}
+            onBlur={() => saveEdit()}
+            className="h-8 w-full rounded border border-primary bg-background px-2 text-[13px] focus:ring-1 focus:ring-primary"
+          >
+            <option value="">선택</option>
+            {col.selectOptions.map((o) => (
+              <option key={o.value} value={o.value}>{o.label}</option>
+            ))}
+          </select>
+        );
+      }
+      return (
+        <input
+          ref={editRef as any}
+          type={col.inputType === "number" ? "number" : col.inputType === "date" ? "date" : "text"}
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          onKeyDown={handleEditKeyDown}
+          onBlur={() => saveEdit()}
+          className={cn(
+            "h-8 w-full rounded border border-primary bg-background px-2 text-[13px] focus:ring-1 focus:ring-primary",
+            col.align === "right" && "text-right"
+          )}
+        />
+      );
+    }
+
+    // 커스텀 렌더러
+    if (col.render) {
+      return col.render(val, row, rowIdx);
+    }
+
+    // 기본 렌더링
+    let display: React.ReactNode = val ?? "";
+    if (col.formatNumber || col.inputType === "number") display = fmtNum(val);
+
+    return (
+      <span
+        className={cn(
+          col.truncate !== false && "block truncate",
+          col.align === "right" && "text-right w-full inline-block",
+          col.align === "center" && "text-center w-full inline-block",
+        )}
+        title={String(val ?? "")}
+      >
+        {display}
+      </span>
+    );
+  };
+
+  return (
+    <div className={cn("flex flex-col h-full flex-1 min-h-0", className)}>
+      <div className="flex-1 min-h-0 overflow-auto">
+        <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+          <Table className="min-w-max">
+            <TableHeader className="sticky top-0 z-10">
+              <SortableContext items={columns.map((c) => c.key)} strategy={horizontalListSortingStrategy}>
+                <TableRow className="bg-muted hover:bg-muted h-10">
+                  {/* 체크박스 */}
+                  {showCheckbox && (
+                    <TableHead className="w-10 text-center">
+                      <Checkbox
+                        checked={allChecked}
+                        onCheckedChange={(checked) => {
+                          onCheckedChange?.(checked ? processedData.map((r) => getRowId(r, rowKey)) : []);
+                        }}
+                      />
+                    </TableHead>
+                  )}
+                  {/* 행번호 */}
+                  {showRowNumber && (
+                    <TableHead className="w-10 text-center text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                      #
+                    </TableHead>
+                  )}
+                  {/* 데이터 컬럼 */}
+                  {columns.map((col) => (
+                    <SortableHeaderCell
+                      key={col.key}
+                      col={col}
+                      sortKey={sortState?.key ?? null}
+                      sortDir={sortState?.direction ?? "asc"}
+                      onSort={handleSort}
+                      headerFilterValues={headerFilters[col.key] || new Set()}
+                      uniqueValues={columnUniqueValues[col.key] || []}
+                      onToggleFilter={toggleHeaderFilter}
+                      onClearFilter={clearHeaderFilter}
+                      draggable={draggableColumns}
+                    />
+                  ))}
+                </TableRow>
+              </SortableContext>
+            </TableHeader>
+
+            <TableBody>
+              {loading ? (
+                <TableRow>
+                  <TableCell colSpan={colSpan} className="py-16 text-center">
+                    <Loader2 className="mx-auto h-6 w-6 animate-spin text-primary" />
+                  </TableCell>
+                </TableRow>
+              ) : paginatedData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={colSpan} className="py-16 text-center">
+                    <div className="flex flex-col items-center gap-2 text-muted-foreground">
+                      {emptyIcon || <Inbox className="h-8 w-8 opacity-30" />}
+                      <span className="text-sm">{emptyMessage}</span>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((row, rowIdx) => {
+                  // 그룹 소계 행 처리
+                  if ((row as any)._isGroupSummary) {
+                    return (
+                      <TableRow key={`summary-${rowIdx}`} className="bg-muted/60 font-semibold border-t border-primary/20">
+                        {showCheckbox && <TableCell />}
+                        {showRowNumber && <TableCell />}
+                        {columns.map((col) => (
+                          <TableCell
+                            key={col.key}
+                            className={cn(
+                              typeof row[col.key] === "number" ? "text-right font-mono text-[13px]" : "text-[13px] text-primary",
+                              col.width, col.minWidth,
+                            )}
+                          >
+                            {typeof row[col.key] === "number" ? Number(row[col.key]).toLocaleString() : (row[col.key] || "")}
+                          </TableCell>
+                        ))}
+                      </TableRow>
+                    );
+                  }
+
+                  const id = getRowId(row, rowKey);
+                  const isSelected = selectedId != null && String(selectedId) === String(id);
+                  const isChecked = checkedIds.includes(id);
+                  const highlighted = isSelected || isChecked;
+
+                  return (
+                    <TableRow
+                      key={id || rowIdx}
+                      className={cn(
+                        "cursor-pointer border-l-[3px] border-l-transparent transition-all h-[41px]",
+                        highlighted
+                          ? "border-l-primary bg-primary/20 dark:bg-primary/15 row-selected"
+                          : "hover:bg-accent"
+                      )}
+                      onClick={() => {
+                        onSelect?.(id);
+                        onRowClick?.(row, pageOffset + rowIdx);
+                        if (showCheckbox && onCheckedChange) {
+                          const next = checkedIds.includes(id)
+                            ? checkedIds.filter((cid) => cid !== id)
+                            : [...checkedIds, id];
+                          onCheckedChange(next);
+                        }
+                      }}
+                      onDoubleClick={() => onRowDoubleClick?.(row, pageOffset + rowIdx)}
+                    >
+                      {showCheckbox && (
+                        <TableCell className="text-center" onClick={(e) => e.stopPropagation()}>
+                          <Checkbox
+                            checked={isChecked}
+                            onCheckedChange={(checked) => {
+                              const next = checked
+                                ? [...checkedIds, id]
+                                : checkedIds.filter((cid) => cid !== id);
+                              onCheckedChange?.(next);
+                            }}
+                          />
+                        </TableCell>
+                      )}
+                      {showRowNumber && (
+                        <TableCell className="text-center text-[11px] text-muted-foreground font-mono">
+                          {pageOffset + rowIdx + 1}
+                        </TableCell>
+                      )}
+                      {columns.map((col) => (
+                        <TableCell
+                          key={col.key}
+                          className={cn(
+                            col.width, col.minWidth,
+                            col.editable && "cursor-text",
+                            col.align === "right" && "text-right",
+                            col.align === "center" && "text-center",
+                          )}
+                          onDoubleClick={(e) => {
+                            if (col.editable) {
+                              e.stopPropagation();
+                              startEdit(id, col.key, row[col.key]);
+                            }
+                          }}
+                        >
+                          {renderCell(row, col, pageOffset + rowIdx)}
+                        </TableCell>
+                      ))}
+                    </TableRow>
+                  );
+                })
+              )}
+            </TableBody>
+          </Table>
+        </DndContext>
+      </div>
+
+      {/* 페이지네이션 */}
+      {showPagination && (
+        <div className="flex items-center justify-between border-t px-4 py-2.5 text-xs text-muted-foreground shrink-0">
+          <div className="flex items-center gap-3">
+            <div className="flex items-center gap-1">
+              <span>전체</span>
+              <span className="font-medium text-foreground">{totalItems.toLocaleString()}</span>
+              <span>건</span>
+            </div>
+            <div className="flex items-center gap-1.5">
+              <Input
+                type="number"
+                min={1}
+                value={pageSizeInput}
+                onChange={(e) => setPageSizeInput(e.target.value)}
+                onBlur={applyPageSize}
+                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); applyPageSize(); } }}
+                className="h-7 w-16 text-center text-xs"
+              />
+              <span>건씩 보기</span>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-0.5">
+            <button onClick={() => setCurrentPage(1)} disabled={safePage === 1}
+              className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed">
+              <ChevronsLeft className="h-3.5 w-3.5" />
+            </button>
+            <button onClick={() => setCurrentPage((p) => Math.max(1, p - 1))} disabled={safePage === 1}
+              className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed">
+              <ChevronLeft className="h-3.5 w-3.5" />
+            </button>
+            {getPageNumbers().map((page, idx) =>
+              page === "..." ? (
+                <span key={`dot-${idx}`} className="h-7 w-7 flex items-center justify-center text-muted-foreground">...</span>
+              ) : (
+                <button key={page} onClick={() => setCurrentPage(page as number)}
+                  className={cn("h-7 w-7 flex items-center justify-center rounded text-xs",
+                    page === safePage ? "bg-primary text-primary-foreground font-medium" : "hover:bg-muted")}>
+                  {page}
+                </button>
+              )
+            )}
+            <button onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))} disabled={safePage === totalPages}
+              className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed">
+              <ChevronRight className="h-3.5 w-3.5" />
+            </button>
+            <button onClick={() => setCurrentPage(totalPages)} disabled={safePage === totalPages}
+              className="h-7 w-7 flex items-center justify-center rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed">
+              <ChevronsRight className="h-3.5 w-3.5" />
+            </button>
+          </div>
+
+          <div className="flex items-center gap-1.5">
+            <Input
+              type="number"
+              min={1}
+              max={totalPages}
+              placeholder={String(safePage)}
+              className="h-7 w-14 text-center text-xs"
+              onKeyDown={(e) => {
+                if (e.key === "Enter") {
+                  const val = parseInt((e.target as HTMLInputElement).value, 10);
+                  if (!isNaN(val) && val >= 1 && val <= totalPages) {
+                    setCurrentPage(val);
+                    (e.target as HTMLInputElement).value = "";
+                    (e.target as HTMLInputElement).blur();
+                  }
+                }
+              }}
+              onBlur={(e) => {
+                const val = parseInt(e.target.value, 10);
+                if (!isNaN(val) && val >= 1 && val <= totalPages) {
+                  setCurrentPage(val);
+                }
+                e.target.value = "";
+              }}
+            />
+            <span>/ {totalPages} 페이지</span>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/frontend/components/common/TableSettingsModal.tsx b/frontend/components/common/TableSettingsModal.tsx
index b3617a97..40db3a3a 100644
--- a/frontend/components/common/TableSettingsModal.tsx
+++ b/frontend/components/common/TableSettingsModal.tsx
@@ -652,20 +652,22 @@ export function TableSettingsModal({
                 </div>
               </div>
 
-              {/* 그룹별 합산 토글 */}
-              <div className="mt-3 flex items-center justify-between rounded-lg border p-3">
-                <div>
-                  <div className="text-sm font-medium">그룹별 합산</div>
-                  <div className="text-xs text-muted-foreground">같은 값끼리 그룹핑하여 합산</div>
-                </div>
-                <Switch checked={tempGroupSum} onCheckedChange={setTempGroupSum} />
-              </div>
             </TabsContent>
 
             {/* ===== 탭 3: 그룹 설정 ===== */}
             <TabsContent value="groups" className="mt-0 pt-3 overflow-y-auto max-h-[calc(80vh-220px)]">
-              <div className="px-2 pb-3 border-b mb-2">
-                <span className="text-sm font-medium">사용 가능한 컬럼</span>
+              {/* 헤더 + 합산 토글 */}
+              <div className="flex items-center justify-between px-2 pb-3 border-b mb-2">
+                <div className="flex items-center gap-2">
+                  <span className="text-sm font-medium">그룹 컬럼</span>
+                  <span className="text-xs text-muted-foreground">
+                    {tempGroups.filter((g) => g.enabled).length}개 선택
+                  </span>
+                </div>
+                <div className="flex items-center gap-2">
+                  <span className="text-xs text-muted-foreground">소계 합산</span>
+                  <Switch checked={tempGroupSum} onCheckedChange={setTempGroupSum} />
+                </div>
               </div>
 
               <div className="space-y-0.5">
diff --git a/frontend/components/ui/table.tsx b/frontend/components/ui/table.tsx
index 5ff9c2ce..7c271a78 100644
--- a/frontend/components/ui/table.tsx
+++ b/frontend/components/ui/table.tsx
@@ -43,7 +43,7 @@ function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
   return (
     <tr
       data-slot="table-row"
-      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors", className)}
+      className={cn("hover:bg-muted/50 data-[state=selected]:bg-muted border-b border-border/60 transition-colors", className)}
       {...props}
     />
   );
diff --git a/frontend/hooks/useTableSettings.ts b/frontend/hooks/useTableSettings.ts
index 10956d0c..7155887c 100644
--- a/frontend/hooks/useTableSettings.ts
+++ b/frontend/hooks/useTableSettings.ts
@@ -46,6 +46,8 @@ export function useTableSettings<T extends { key: string }>(
     () => initialVisibleKeys || defaultColumns.map((c) => c.key),
   );
   const [baseFilter, setBaseFilter] = useState<BaseFilter | undefined>();
+  const [groupColumns, setGroupColumns] = useState<string[]>([]);
+  const [groupSumEnabled, setGroupSumEnabled] = useState(false);
 
   // 초기 filterConfig: GRID_COLUMNS에 있는 컬럼만 필터 가능 (전부 비활성)
   const [filterConfig, setFilterConfig] = useState<TableSettings["filters"]>(
@@ -96,6 +98,11 @@ export function useTableSettings<T extends { key: string }>(
 
       // 기본 데이터 필터
       setBaseFilter(settings.baseFilter);
+
+      // 그룹 설정
+      const enabledGroups = (settings.groups || []).filter((g) => g.enabled).map((g) => g.columnName);
+      setGroupColumns(enabledGroups);
+      setGroupSumEnabled(settings.groupSumEnabled || false);
     },
     [defaultColumns, initialVisibleKeys],
   );
@@ -148,6 +155,50 @@ export function useTableSettings<T extends { key: string }>(
     [columnWidths],
   );
 
+  /**
+   * 데이터를 그룹핑하고 소계 행을 삽입한 배열을 반환합니다.
+   * groupColumns가 비어있으면 원본 배열을 그대로 반환합니다.
+   * 소계 행은 _isGroupSummary: true, _groupKey, _groupValue 속성을 가집니다.
+   */
+  const groupData = useCallback(
+    <R extends Record<string, any>>(rows: R[]): (R & { _isGroupSummary?: boolean; _groupKey?: string; _groupValue?: string })[] => {
+      if (groupColumns.length === 0) return rows;
+
+      const groupCol = groupColumns[0]; // 첫 번째 그룹 컬럼 기준
+      const groups = new Map<string, R[]>();
+
+      for (const row of rows) {
+        const key = String(row[groupCol] ?? "(빈 값)");
+        if (!groups.has(key)) groups.set(key, []);
+        groups.get(key)!.push(row);
+      }
+
+      const result: (R & { _isGroupSummary?: boolean; _groupKey?: string; _groupValue?: string })[] = [];
+
+      for (const [groupValue, groupRows] of groups) {
+        // 그룹 내 데이터 행
+        result.push(...groupRows);
+
+        // 소계 행 (groupSumEnabled일 때만)
+        if (groupSumEnabled) {
+          const summaryRow: any = { _isGroupSummary: true, _groupKey: groupCol, _groupValue: groupValue };
+          // 숫자 컬럼 합산
+          for (const col of defaultColumns) {
+            const values = groupRows.map((r) => Number(r[col.key])).filter((v) => !isNaN(v));
+            if (values.length > 0 && values.some((v) => v !== 0)) {
+              summaryRow[col.key] = values.reduce((a, b) => a + b, 0);
+            }
+          }
+          summaryRow[groupCol] = `${groupValue} 소계 (${groupRows.length}건)`;
+          result.push(summaryRow);
+        }
+      }
+
+      return result;
+    },
+    [groupColumns, groupSumEnabled, defaultColumns],
+  );
+
   return {
     /** 모달 open 상태 */
     open,
@@ -171,6 +222,12 @@ export function useTableSettings<T extends { key: string }>(
     filterConfig,
     /** 기본 데이터 필터 (예: division = '판매') */
     baseFilter,
+    /** 데이터 그룹핑 + 소계 삽입 함수 */
+    groupData,
+    /** 그룹 컬럼 목록 */
+    groupColumns,
+    /** 그룹별 합산 활성 여부 */
+    groupSumEnabled,
     /** GRID_COLUMNS 기본 컬럼 키 목록 (TableSettingsModal defaultVisibleKeys용) */
     defaultVisibleKeys: initialVisibleKeys || defaultColumns.map((c) => c.key),
   };
diff --git a/myfile.txt b/myfile.txt
new file mode 100644
index 00000000..ce013625
--- /dev/null
+++ b/myfile.txt
@@ -0,0 +1 @@
+hello
diff --git a/scripts/dev/start-all-parallel-linux.sh b/scripts/dev/start-all-parallel-linux.sh
new file mode 100755
index 00000000..eef3de83
--- /dev/null
+++ b/scripts/dev/start-all-parallel-linux.sh
@@ -0,0 +1,168 @@
+#!/bin/bash
+
+# 스크립트 위치에서 프로젝트 루트로 이동
+cd "$(dirname "$0")/../.." || exit 1
+
+# 시작 시간 기록
+START_TIME=$(date +%s)
+START_TIME_FORMATTED=$(date '+%Y-%m-%d %H:%M:%S')
+
+echo ""
+echo "============================================"
+echo "WACE 솔루션 - 전체 서비스 시작 (병렬 최적화) - Linux"
+echo "============================================"
+echo "[시작 시간] $START_TIME_FORMATTED"
+echo ""
+
+# Docker 확인
+echo "[1/5] Docker 상태 확인 중..."
+if ! docker --version >/dev/null 2>&1; then
+    echo "[ERROR] Docker가 설치되지 않았거나 실행 중이 아닙니다!"
+    exit 1
+fi
+echo "[OK] Docker 환경 확인 완료"
+echo ""
+
+# docker compose vs docker-compose 자동 감지
+if docker compose version >/dev/null 2>&1; then
+    DC="docker compose"
+else
+    DC="docker-compose"
+fi
+
+BACKEND_COMPOSE="docker/dev/docker-compose.backend.linux.yml"
+FRONTEND_COMPOSE="docker/dev/docker-compose.frontend.linux.yml"
+
+# 기존 컨테이너 정리
+echo "[2/5] 기존 컨테이너 정리 중..."
+docker rm -f pms-backend-linux pms-frontend-linux 2>/dev/null || true
+docker network rm pms-network 2>/dev/null || true
+docker network create pms-network 2>/dev/null || true
+echo "[OK] 컨테이너 정리 완료"
+echo ""
+
+# 병렬 빌드 시작
+PARALLEL_START=$(date +%s)
+echo "[3/5] 이미지 빌드 중... (백엔드 + 프론트엔드 병렬)"
+echo ""
+
+# 백엔드 빌드 (백그라운드)
+(
+    $DC -f "$BACKEND_COMPOSE" build 2>&1
+) > /tmp/pms-backend-build.log 2>&1 &
+BACKEND_BUILD_PID=$!
+
+# 프론트엔드 빌드 (백그라운드)
+(
+    $DC -f "$FRONTEND_COMPOSE" build 2>&1
+) > /tmp/pms-frontend-build.log 2>&1 &
+FRONTEND_BUILD_PID=$!
+
+echo "      백엔드 빌드 진행 중... (PID: $BACKEND_BUILD_PID)"
+echo "      프론트엔드 빌드 진행 중... (PID: $FRONTEND_BUILD_PID)"
+echo ""
+
+# 빌드 완료 대기
+wait $BACKEND_BUILD_PID
+BACKEND_BUILD_RESULT=$?
+wait $FRONTEND_BUILD_PID
+FRONTEND_BUILD_RESULT=$?
+
+# 빌드 결과 확인
+BUILD_FAILED=false
+if [ $BACKEND_BUILD_RESULT -eq 0 ]; then
+    echo "[OK] 백엔드 빌드 완료"
+else
+    echo "[ERROR] 백엔드 빌드 실패!"
+    cat /tmp/pms-backend-build.log
+    BUILD_FAILED=true
+fi
+
+if [ $FRONTEND_BUILD_RESULT -eq 0 ]; then
+    echo "[OK] 프론트엔드 빌드 완료"
+else
+    echo "[ERROR] 프론트엔드 빌드 실패!"
+    cat /tmp/pms-frontend-build.log
+    BUILD_FAILED=true
+fi
+
+if [ "$BUILD_FAILED" = true ]; then
+    echo "빌드 실패로 중단합니다."
+    exit 1
+fi
+
+PARALLEL_END=$(date +%s)
+PARALLEL_DURATION=$((PARALLEL_END - PARALLEL_START))
+echo "[INFO] 빌드 소요 시간: ${PARALLEL_DURATION}초"
+echo ""
+
+# 서비스 시작
+SERVICE_START=$(date +%s)
+echo "[4/5] 서비스 시작 중..."
+
+# 기존 서비스 정리
+$DC -f "$BACKEND_COMPOSE" down -v 2>/dev/null || true
+$DC -f "$FRONTEND_COMPOSE" down -v 2>/dev/null || true
+
+# 백엔드 시작
+echo "      백엔드 서비스 시작..."
+$DC -f "$BACKEND_COMPOSE" up -d
+if [ $? -ne 0 ]; then
+    echo "[ERROR] 백엔드 시작 실패!"
+    exit 1
+fi
+
+# 프론트엔드 시작
+echo "      프론트엔드 서비스 시작..."
+$DC -f "$FRONTEND_COMPOSE" up -d
+if [ $? -ne 0 ]; then
+    echo "[ERROR] 프론트엔드 시작 실패!"
+    exit 1
+fi
+
+echo "[OK] 서비스 시작 완료"
+
+SERVICE_END=$(date +%s)
+SERVICE_DURATION=$((SERVICE_END - SERVICE_START))
+echo "[INFO] 서비스 시작 소요 시간: ${SERVICE_DURATION}초"
+echo ""
+
+# 안정화 대기
+echo "[5/5] 서비스 안정화 대기 중... (10초)"
+sleep 10
+echo ""
+
+echo "============================================"
+echo "[완료] 모든 서비스가 시작되었습니다!"
+echo "============================================"
+echo ""
+echo "[DATABASE] PostgreSQL: http://211.115.91.141:11134"
+echo "[BACKEND]  Node.js API: http://localhost:8080/api"
+echo "[FRONTEND] Next.js:     http://localhost:9771"
+echo ""
+echo "[서비스 상태 확인]"
+echo "  $DC -f $BACKEND_COMPOSE ps"
+echo "  $DC -f $FRONTEND_COMPOSE ps"
+echo ""
+echo "[로그 확인]"
+echo "  백엔드:   $DC -f $BACKEND_COMPOSE logs -f"
+echo "  프론트엔드: $DC -f $FRONTEND_COMPOSE logs -f"
+echo ""
+echo "[서비스 중지]"
+echo "  $DC -f $BACKEND_COMPOSE down"
+echo "  $DC -f $FRONTEND_COMPOSE down"
+echo ""
+
+# 종료 시간 계산
+END_TIME=$(date +%s)
+END_TIME_FORMATTED=$(date '+%Y-%m-%d %H:%M:%S')
+DURATION=$((END_TIME - START_TIME))
+MINUTES=$((DURATION / 60))
+SECONDS=$((DURATION % 60))
+
+echo "============================================"
+echo "[종료 시간] $END_TIME_FORMATTED"
+echo "[총 소요 시간] ${MINUTES}분 ${SECONDS}초"
+echo "  - 빌드: ${PARALLEL_DURATION}초"
+echo "  - 서비스 시작: ${SERVICE_DURATION}초"
+echo "============================================"
diff --git a/test.txt b/test.txt
new file mode 100644
index 00000000..ce013625
--- /dev/null
+++ b/test.txt
@@ -0,0 +1 @@
+hello