테이블 설정패널 간소화

This commit is contained in:
kjs 2026-01-05 15:35:19 +09:00
parent 722eebb00b
commit b4a1fe6889
2 changed files with 66 additions and 23 deletions

View File

@ -41,6 +41,7 @@ export const UnifiedList = forwardRef<HTMLDivElement, UnifiedListProps>((props,
align: "left" as const,
order: index,
isEntityJoin: col.isJoinColumn || false,
thousandSeparator: col.thousandSeparator !== false, // 천단위 구분자 (기본: true)
})),
[config.columns],
);

View File

@ -138,8 +138,14 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
}, [tableName]);
// 컬럼 설정
const configColumns: Array<{ key: string; title: string; width?: string; isJoinColumn?: boolean }> =
config.columns || [];
const configColumns: Array<{
key: string;
title: string;
width?: string;
isJoinColumn?: boolean;
inputType?: string;
thousandSeparator?: boolean;
}> = config.columns || [];
// 컬럼이 추가되었는지 확인
const isColumnAdded = (columnName: string) => {
@ -154,16 +160,35 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
updateConfig("columns", newColumns);
} else {
// 추가
const isNumberType = ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(
column.inputType || "",
);
const newColumn = {
key: column.columnName,
title: column.displayName,
width: "",
isJoinColumn: column.isJoinColumn || false,
inputType: column.inputType,
thousandSeparator: isNumberType ? true : undefined, // 숫자 타입은 기본적으로 천단위 구분자 사용
};
updateConfig("columns", [...configColumns, newColumn]);
}
};
// 컬럼 천단위 구분자 토글
const toggleThousandSeparator = (columnKey: string, checked: boolean) => {
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, thousandSeparator: checked } : col));
updateConfig("columns", newColumns);
};
// 숫자 타입 컬럼인지 확인
const isNumberColumn = (columnKey: string) => {
const colInfo = columns.find((c) => c.columnName === columnKey);
const configCol = configColumns.find((c) => c.key === columnKey);
const inputType = configCol?.inputType || colInfo?.inputType || "";
return ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(inputType);
};
// 컬럼 제목 수정
const updateColumnTitle = (columnKey: string, title: string) => {
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col));
@ -387,8 +412,10 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
<div className="max-h-40 space-y-1 overflow-y-auto">
{configColumns.map((column, index) => {
const colInfo = columns.find((c) => c.columnName === column.key);
const showThousandSeparator = isNumberColumn(column.key);
return (
<div key={column.key} className="bg-muted/30 flex items-center gap-2 rounded-md border p-2">
<div key={column.key} className="bg-muted/30 space-y-1.5 rounded-md border p-2">
<div className="flex items-center gap-2">
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
{column.isJoinColumn ? (
<Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
@ -411,6 +438,21 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
×
</Button>
</div>
{/* 숫자 컬럼인 경우 천단위 구분자 옵션 표시 */}
{showThousandSeparator && (
<div className="ml-5 flex items-center gap-2">
<Checkbox
id={`thousand-${column.key}`}
checked={column.thousandSeparator !== false}
onCheckedChange={(checked) => toggleThousandSeparator(column.key, !!checked)}
className="h-3 w-3"
/>
<label htmlFor={`thousand-${column.key}`} className="text-muted-foreground text-[10px]">
</label>
</div>
)}
</div>
);
})}
</div>