feat: 테이블 관리의 입력 타입 기반 자동 숫자 포맷팅

- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅
- getColumnInputTypes API 추가로 컬럼별 입력 타입 조회
- columnMeta에 inputType 포함하여 formatCellValue에서 사용
- 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시
- 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅
This commit is contained in:
kjs 2025-11-03 10:14:32 +09:00
parent 68aafb3732
commit 1c571ee3c3
3 changed files with 27 additions and 20 deletions

View File

@ -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)) {

View File

@ -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,

View File

@ -285,19 +285,28 @@ 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 {