From 2733685df7d6f1d96ec4807dd587f8f4cba3c69f Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 9 Apr 2026 18:09:17 +0900
Subject: [PATCH] feat: Refactor table components for improved layout and
 usability

- Updated the BOM management page to streamline the layout by moving the edit button to the top right for better accessibility.
- Enhanced the DataGrid and EDataTable components to support a no-wrapper option, allowing for sticky headers to function correctly with parent overflow settings.
- Adjusted the Sales Order page to utilize the new noWrapper feature for the table, ensuring consistent styling and behavior.
- Enabled sticky headers in the V2 table list definition for improved data visibility during scrolling.

These changes aim to enhance the user experience by providing a more intuitive and organized interface for managing BOM and sales order data across multiple companies.
---
 .../(main)/COMPANY_7/production/bom/page.tsx  | 51 +++----------------
 .../app/(main)/COMPANY_7/sales/order/page.tsx |  2 +-
 frontend/components/common/DataGrid.tsx       |  4 +-
 frontend/components/common/EDataTable.tsx     |  4 +-
 frontend/components/ui/table.tsx              | 12 ++---
 .../components/v2-table-list/index.ts         |  2 +-
 6 files changed, 15 insertions(+), 60 deletions(-)

diff --git a/frontend/app/(main)/COMPANY_7/production/bom/page.tsx b/frontend/app/(main)/COMPANY_7/production/bom/page.tsx
index a6a50afe..6ef74cde 100644
--- a/frontend/app/(main)/COMPANY_7/production/bom/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/bom/page.tsx
@@ -1517,51 +1517,12 @@ export default function BomManagementPage() {
               </div>
             ) : (
               <div className="flex flex-col h-full">
-                {/* 상세 카드 */}
-                <div className="border-b shrink-0">
-                  <div className="flex items-center justify-between px-4 py-2.5 border-b bg-muted/50">
-                    <h3 className="text-[13px] font-bold text-foreground">BOM 상세정보</h3>
-                    <Button size="sm" variant="ghost" onClick={openEditModal}>
-                      <FileText className="w-3.5 h-3.5 mr-1" />
-                      편집
-                    </Button>
-                  </div>
-                  {detailLoading ? (
-                    <div className="flex items-center justify-center py-8">
-                      <Loader2 className="w-5 h-5 animate-spin text-muted-foreground" />
-                    </div>
-                  ) : bomHeader ? (
-                    <div className="grid grid-cols-2 text-sm">
-                      <div className="flex flex-col gap-1 p-3 border-b border-r">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품목코드</span>
-                        <span className="font-mono text-xs">{bomHeader.item_code || bomHeader.item_number || "-"}</span>
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 border-b">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">품명</span>
-                        <span className="text-xs">{bomHeader.item_name || "-"}</span>
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 border-b border-r">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">BOM 유형</span>
-                        <span className="text-xs">{BOM_TYPE_OPTIONS.find((o) => o.code === bomHeader.bom_type)?.label || bomHeader.bom_type || "-"}</span>
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 border-b">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">버전</span>
-                        <span className="text-xs">{bomHeader.version || "-"}</span>
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 border-b border-r">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">기준수량</span>
-                        <span className="text-xs">{bomHeader.base_qty || "1"} {bomHeader.unit || ""}</span>
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 border-b">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">상태</span>
-                        {renderStatusBadge(bomHeader.status)}
-                      </div>
-                      <div className="flex flex-col gap-1 p-3 col-span-2">
-                        <span className="text-[10px] font-medium text-muted-foreground uppercase tracking-wider">메모</span>
-                        <span className="text-xs text-muted-foreground">{bomHeader.remark || "-"}</span>
-                      </div>
-                    </div>
-                  ) : null}
+                {/* 편집 버튼 */}
+                <div className="flex items-center justify-end px-4 py-2 border-b bg-muted/50 shrink-0">
+                  <Button size="sm" variant="ghost" onClick={openEditModal}>
+                    <FileText className="w-3.5 h-3.5 mr-1" />
+                    편집
+                  </Button>
                 </div>
 
                 {/* 하단 탭: 트리뷰 / 버전 / 이력 */}
diff --git a/frontend/app/(main)/COMPANY_7/sales/order/page.tsx b/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
index 1cb49efb..984e359c 100644
--- a/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/sales/order/page.tsx
@@ -918,7 +918,7 @@ export default function SalesOrderPage() {
       {/* 데이터 테이블 (플랫 리스트) */}
       <div className="flex-1 overflow-hidden rounded-lg border border-border bg-card">
         <div className="h-full overflow-auto">
-          <Table style={{ minWidth: "1500px" }}>
+          <Table noWrapper style={{ minWidth: "1500px" }}>
             <colgroup>
               <col style={{ width: "40px" }} />
               <col style={{ width: "140px" }} />
diff --git a/frontend/components/common/DataGrid.tsx b/frontend/components/common/DataGrid.tsx
index 0d717acf..b6998da0 100644
--- a/frontend/components/common/DataGrid.tsx
+++ b/frontend/components/common/DataGrid.tsx
@@ -502,8 +502,8 @@ export function DataGrid({
     <div className="flex flex-col h-full flex-1 min-h-0">
       <div className="flex-1 min-h-0 overflow-auto">
       <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
-        <Table>
-          <TableHeader className="sticky top-0 bg-background z-10 shadow-sm">
+        <Table noWrapper>
+          <TableHeader className="sticky top-0 bg-background z-10 shadow-[0_1px_0_0_hsl(var(--border))]">
             <SortableContext items={columns.map((c) => c.key)} strategy={horizontalListSortingStrategy}>
               <TableRow>
                 {showCheckbox && (
diff --git a/frontend/components/common/EDataTable.tsx b/frontend/components/common/EDataTable.tsx
index 8891de4d..54f1d74c 100644
--- a/frontend/components/common/EDataTable.tsx
+++ b/frontend/components/common/EDataTable.tsx
@@ -610,8 +610,8 @@ export function EDataTable<T extends Record<string, any> = any>({
     <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">
+          <Table noWrapper className="min-w-max">
+            <TableHeader className="sticky top-0 z-10 bg-muted shadow-[0_1px_0_0_hsl(var(--border))]">
               <SortableContext items={columns.map((c) => c.key)} strategy={horizontalListSortingStrategy}>
                 <TableRow className="bg-muted hover:bg-muted h-10">
                   {/* 체크박스 */}
diff --git a/frontend/components/ui/table.tsx b/frontend/components/ui/table.tsx
index 7c271a78..cf5e8145 100644
--- a/frontend/components/ui/table.tsx
+++ b/frontend/components/ui/table.tsx
@@ -10,15 +10,9 @@ interface TableProps extends React.ComponentProps<"table"> {
 }
 
 function Table({ className, noWrapper, divClassName, ...props }: TableProps) {
-  if (noWrapper) {
-    return <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />;
-  }
-
-  return (
-    <div data-slot="table-container" className={cn("relative w-full overflow-x-auto", divClassName)}>
-      <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />
-    </div>
-  );
+  // noWrapper 여부 관계없이 wrapper를 제거하여 sticky header가 부모 overflow-auto 기준으로 동작하도록 함
+  // 가로 스크롤은 부모의 overflow-auto에서 처리
+  return <table data-slot="table" className={cn("w-full caption-bottom text-sm", className)} {...props} />;
 }
 
 function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
diff --git a/frontend/lib/registry/components/v2-table-list/index.ts b/frontend/lib/registry/components/v2-table-list/index.ts
index d19953cd..ca2ddab5 100644
--- a/frontend/lib/registry/components/v2-table-list/index.ts
+++ b/frontend/lib/registry/components/v2-table-list/index.ts
@@ -49,7 +49,7 @@ export const V2TableListDefinition = createComponentDefinition({
     // 컬럼 설정
     columns: [],
     autoWidth: true,
-    stickyHeader: false,
+    stickyHeader: true,
 
     // 가로 스크롤 및 컬럼 고정 설정
     horizontalScroll: {