From 516bcafb2c3268e5b64d1e162d2a6d6fdb8b3477 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 13:25:57 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=A0=95?=
 =?UTF-8?q?=EB=A0=AC=20=EA=B0=9C=EC=84=A0=20-=20=ED=97=A4=EB=8D=94=20?=
 =?UTF-8?q?=EA=B0=80=EC=9A=B4=EB=8D=B0,=20=EC=88=AB=EC=9E=90=20=EC=9A=B0?=
 =?UTF-8?q?=EC=B8=A1=20=EC=A0=95=EB=A0=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 모든 테이블 헤더를 가운데 정렬 (text-center)
- 숫자 타입(number, decimal) 데이터를 우측 정렬
- TableListComponent: inputType 기반 숫자 판단
- InteractiveDataTable: widgetType 기반 숫자 판단
- 체크박스는 기존대로 가운데 정렬 유지
- 일반 텍스트는 좌측 정렬 유지

더 읽기 쉬운 테이블 레이아웃 완성
---
 .../screen/InteractiveDataTable.tsx           | 19 +++++++++++++------
 .../table-list/TableListComponent.tsx         |  8 ++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index a588b354..45a5e488 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1974,7 +1974,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                           <TableHead
                             key={column.id}
                             ref={(el) => (columnRefs.current[column.id] = el)}
-                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none"
+                            className="relative bg-gradient-to-r from-gray-50 to-slate-50 px-4 font-semibold text-gray-700 select-none text-center"
                             style={{ 
                               width: columnWidth ? `${columnWidth}px` : undefined,
                               userSelect: 'none'
@@ -2067,11 +2067,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                               />
                             </TableCell>
                           )}
-                          {visibleColumns.map((column: DataTableColumn) => (
-                            <TableCell key={column.id} className="px-4 text-sm font-medium text-gray-900">
-                              {formatCellValue(row[column.columnName], column, row)}
-                            </TableCell>
-                          ))}
+                          {visibleColumns.map((column: DataTableColumn) => {
+                            const isNumeric = column.widgetType === "number" || column.widgetType === "decimal";
+                            return (
+                              <TableCell 
+                                key={column.id} 
+                                className="px-4 text-sm font-medium text-gray-900"
+                                style={{ textAlign: isNumeric ? 'right' : 'left' }}
+                              >
+                                {formatCellValue(row[column.columnName], column, row)}
+                              </TableCell>
+                            );
+                          })}
                           {/* 자동 파일 셀 표시 제거됨 - 명시적으로 추가된 파일 컬럼만 표시 */}
                         </TableRow>
                       ))
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 780b4c4d..aa82d5b2 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -1067,7 +1067,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                           column.sortable && "cursor-pointer"
                         )}
                         style={{
-                          textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
+                          textAlign: column.columnName === "__checkbox__" ? "center" : "center",
                           width: column.columnName === "__checkbox__" ? '48px' : (columnWidth ? `${columnWidth}px` : undefined),
                           minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                           maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
@@ -1191,6 +1191,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                         const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
                         const cellValue = row[mappedColumnName];
 
+                        const meta = columnMeta[column.columnName];
+                        const inputType = meta?.inputType || column.inputType;
+                        const isNumeric = inputType === "number" || inputType === "decimal";
+                        
                         return (
                           <td
                             key={column.columnName}
@@ -1199,7 +1203,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                               column.columnName === "__checkbox__" ? "px-0 py-2" : "px-2 py-2 sm:px-6 sm:py-3"
                             )}
                             style={{
-                              textAlign: column.columnName === "__checkbox__" ? "center" : (column.align || "left"),
+                              textAlign: column.columnName === "__checkbox__" ? "center" : (isNumeric ? "right" : (column.align || "left")),
                               width: column.columnName === "__checkbox__" ? '48px' : `${100 / visibleColumns.length}%`,
                               minWidth: column.columnName === "__checkbox__" ? '48px' : undefined,
                               maxWidth: column.columnName === "__checkbox__" ? '48px' : undefined,