From 1c571ee3c3cbc42d120dcd5f21b6fe0ce0e78f76 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 3 Nov 2025 10:14:32 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EA=B4=80?=
 =?UTF-8?q?=EB=A6=AC=EC=9D=98=20=EC=9E=85=EB=A0=A5=20=ED=83=80=EC=9E=85=20?=
 =?UTF-8?q?=EA=B8=B0=EB=B0=98=20=EC=9E=90=EB=8F=99=20=EC=88=AB=EC=9E=90=20?=
 =?UTF-8?q?=ED=8F=AC=EB=A7=B7=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅
- getColumnInputTypes API 추가로 컬럼별 입력 타입 조회
- columnMeta에 inputType 포함하여 formatCellValue에서 사용
- 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시
- 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅
---
 .../screen/InteractiveDataTable.tsx           |  6 ----
 frontend/lib/api/screen.ts                    |  6 ++++
 .../table-list/TableListComponent.tsx         | 35 +++++++++++--------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index d5c96785..1a6b4991 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -1775,12 +1775,6 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
 
       case "number":
       case "decimal":
-        console.log(`🔢 숫자 컬럼 포맷팅:`, {
-          columnName: column.columnName,
-          widgetType: column.widgetType,
-          value,
-          valueType: typeof value,
-        });
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
diff --git a/frontend/lib/api/screen.ts b/frontend/lib/api/screen.ts
index 695e5a51..3c885a8b 100644
--- a/frontend/lib/api/screen.ts
+++ b/frontend/lib/api/screen.ts
@@ -242,6 +242,12 @@ export const tableTypeApi = {
     return data.columns || data || [];
   },
 
+  // 컬럼 입력 타입 정보 조회
+  getColumnInputTypes: async (tableName: string): Promise<any[]> => {
+    const response = await apiClient.get(`/table-management/tables/${tableName}/web-types`);
+    return response.data.data || [];
+  },
+
   // 컬럼 웹 타입 설정
   setColumnWebType: async (
     tableName: string,
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index 02705896..35920020 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -284,20 +284,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       const columns = await tableTypeApi.getColumns(tableConfig.selectedTable);
+      
+      // 컬럼 입력 타입 정보 가져오기
+      const inputTypes = await tableTypeApi.getColumnInputTypes(tableConfig.selectedTable);
+      const inputTypeMap: Record<string, string> = {};
+      inputTypes.forEach((col: any) => {
+        inputTypeMap[col.columnName] = col.inputType;
+      });
 
       tableColumnCache.set(cacheKey, {
         columns,
+        inputTypes,
         timestamp: Date.now(),
       });
 
       const labels: Record<string, string> = {};
-      const meta: Record<string, { webType?: string; codeCategory?: string }> = {};
+      const meta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
 
       columns.forEach((col: any) => {
         labels[col.columnName] = col.displayName || col.comment || col.columnName;
         meta[col.columnName] = {
           webType: col.webType,
           codeCategory: col.codeCategory,
+          inputType: inputTypeMap[col.columnName],
         };
       });
 
@@ -619,17 +628,6 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
   const formatCellValue = useCallback(
     (value: any, column: ColumnConfig, rowData?: Record<string, any>) => {
-      // 디버그: 첫 번째 데이터 행에서만 로그 출력
-      if (rowData && Object.keys(rowData)[0]) {
-        console.log(`🔍 formatCellValue 호출:`, {
-          columnName: column.columnName,
-          inputType: column.inputType,
-          format: column.format,
-          value,
-          valueType: typeof value,
-        });
-      }
-
       if (value === null || value === undefined) return "-";
 
       // 🎯 엔티티 컬럼 표시 설정이 있는 경우
@@ -658,8 +656,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         if (convertedValue !== value) return convertedValue;
       }
 
-      // inputType 기반 포맷팅 (우선순위)
-      if (column.inputType === "number" || column.inputType === "decimal") {
+      // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
+      const inputType = meta?.inputType || column.inputType;
+      if (inputType === "number" || inputType === "decimal") {
         if (value !== null && value !== undefined && value !== "") {
           const numValue = typeof value === "string" ? parseFloat(value) : value;
           if (!isNaN(numValue)) {
@@ -670,6 +669,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
 
       switch (column.format) {
+        case "number":
+          if (value !== null && value !== undefined && value !== "") {
+            const numValue = typeof value === "string" ? parseFloat(value) : value;
+            if (!isNaN(numValue)) {
+              return numValue.toLocaleString("ko-KR");
+            }
+          }
+          return String(value);
         case "date":
           if (value) {
             try {