feat: 테이블 관리의 입력 타입 기반 자동 숫자 포맷팅
- TableListComponent: table_type_columns의 input_type 정보를 가져와서 숫자 포맷팅 - getColumnInputTypes API 추가로 컬럼별 입력 타입 조회 - columnMeta에 inputType 포함하여 formatCellValue에서 사용 - 테이블 관리에서 설정한 입력 타입(number/decimal)에 따라 자동으로 천 단위 콤마 표시 - 근본적인 해결: 컬럼명 기반이 아닌 실제 설정값 기반 포맷팅
This commit is contained in:
parent
68aafb3732
commit
1c571ee3c3
|
|
@ -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)) {
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
Loading…
Reference in New Issue