From 5842a91c7f92a1927a1ad75cf85e1c48c0f9cdbd Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Fri, 10 Apr 2026 13:58:59 +0900
Subject: [PATCH] refactor: Update table layout styles in Production Plan
 Management page

- Changed the table layout from fixed to a minimum width of 900px to enhance responsiveness.
- Adjusted TableHead components to ensure consistent width and minimum width settings for better alignment and usability.
- These modifications aim to improve the overall user experience by providing a more flexible and visually appealing table layout across multiple companies.
---
 .../COMPANY_10/production/plan-management/page.tsx    |  8 ++++----
 .../COMPANY_16/production/plan-management/page.tsx    |  8 ++++----
 .../COMPANY_29/production/plan-management/page.tsx    |  8 ++++----
 .../COMPANY_30/production/plan-management/page.tsx    |  8 ++++----
 .../COMPANY_7/production/plan-management/page.tsx     |  8 ++++----
 .../COMPANY_8/production/plan-management/page.tsx     |  8 ++++----
 .../COMPANY_9/production/plan-management/page.tsx     |  8 ++++----
 .../report/designer/renderers/CardRenderer.tsx        |  5 ++---
 .../report/designer/renderers/TableRenderer.tsx       | 11 +++++++----
 9 files changed, 37 insertions(+), 35 deletions(-)

diff --git a/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_10/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
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 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_16/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_29/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_30/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_7/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_8/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx b/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx
index 50be10ee..38b01658 100644
--- a/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx
+++ b/frontend/app/(main)/COMPANY_9/production/plan-management/page.tsx
@@ -1052,17 +1052,17 @@ export default function ProductionPlanManagementPage() {
                         };
 
                         return (
-                      <Table style={{ tableLayout: "fixed" }}>
+                      <Table style={{ minWidth: "900px" }}>
                         <TableHeader className="sticky top-0 z-10">
                           <TableRow className="bg-muted hover:bg-muted">
-                            <TableHead className="w-[30px]">
+                            <TableHead style={{ width: "30px", minWidth: "30px" }}>
                               <Checkbox checked={selectedItemGroups.size === orderItems.length && orderItems.length > 0} onCheckedChange={(c) => toggleAllItemGroups(!!c)} className="h-4 w-4" />
                             </TableHead>
-                            <TableHead className="w-[40px]" />
+                            <TableHead style={{ width: "40px", minWidth: "40px" }} />
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목코드</TableHead>
                             <TableHead style={{ width: "140px", minWidth: "140px" }} className="text-xs font-bold whitespace-nowrap text-[11px] font-bold uppercase tracking-wide text-muted-foreground">품목명</TableHead>
                             {ts.visibleColumns.map((col) => (
-                              <TableHead key={col.key} style={ts.thStyle(col.key)} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
+                              <TableHead key={col.key} style={{ ...ts.thStyle(col.key), minWidth: "80px" }} className="text-xs font-bold whitespace-nowrap text-right text-[11px] font-bold uppercase tracking-wide text-muted-foreground">
                                 {col.label}
                               </TableHead>
                             ))}
diff --git a/frontend/components/report/designer/renderers/CardRenderer.tsx b/frontend/components/report/designer/renderers/CardRenderer.tsx
index 65b14b3a..23310059 100644
--- a/frontend/components/report/designer/renderers/CardRenderer.tsx
+++ b/frontend/components/report/designer/renderers/CardRenderer.tsx
@@ -43,9 +43,8 @@ function CardListRenderer({ component, getQueryResult }: CardRendererProps) {
       const queryResult = getQueryResult(component.queryId);
       if (queryResult && queryResult.rows && queryResult.rows.length > 0) {
         const row = queryResult.rows[0];
-        return row[item.fieldName] !== undefined
-          ? String(row[item.fieldName])
-          : item.value;
+        const val = row[item.fieldName];
+        return val !== undefined && val !== null ? String(val) : "";
       }
     }
     return item.value;
diff --git a/frontend/components/report/designer/renderers/TableRenderer.tsx b/frontend/components/report/designer/renderers/TableRenderer.tsx
index cf211c0b..7b23ae1e 100644
--- a/frontend/components/report/designer/renderers/TableRenderer.tsx
+++ b/frontend/components/report/designer/renderers/TableRenderer.tsx
@@ -54,9 +54,12 @@ function getGridCellValue(
 ): string {
   if (cell.cellType === "static") return cell.value ?? "";
 
-  if (cell.cellType === "field" && cell.field && row) {
-    const raw = String(row[cell.field] ?? "");
-    return applyNumberFormat(raw, cell.numberFormat, cell.currencySuffix);
+  if (cell.cellType === "field") {
+    if (cell.field && row) {
+      const raw = String(row[cell.field] ?? "");
+      return applyNumberFormat(raw, cell.numberFormat, cell.currencySuffix);
+    }
+    return ""; // 데이터 없으면 플레이스홀더 숨김
   }
 
   return cell.value ?? "";
@@ -277,7 +280,7 @@ function ClassicTableRenderer({ component, getQueryResult }: TableRendererProps)
                         color: "#d1d5db",
                       }}
                     >
-                      {col.field ? `{${col.field}}` : "—"}
+                      {""}
                     </td>
                   ))}
                 </tr>