테이블 설정패널 간소화

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, align: "left" as const,
order: index, order: index,
isEntityJoin: col.isJoinColumn || false, isEntityJoin: col.isJoinColumn || false,
thousandSeparator: col.thousandSeparator !== false, // 천단위 구분자 (기본: true)
})), })),
[config.columns], [config.columns],
); );

View File

@ -138,8 +138,14 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
}, [tableName]); }, [tableName]);
// 컬럼 설정 // 컬럼 설정
const configColumns: Array<{ key: string; title: string; width?: string; isJoinColumn?: boolean }> = const configColumns: Array<{
config.columns || []; key: string;
title: string;
width?: string;
isJoinColumn?: boolean;
inputType?: string;
thousandSeparator?: boolean;
}> = config.columns || [];
// 컬럼이 추가되었는지 확인 // 컬럼이 추가되었는지 확인
const isColumnAdded = (columnName: string) => { const isColumnAdded = (columnName: string) => {
@ -154,16 +160,35 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
updateConfig("columns", newColumns); updateConfig("columns", newColumns);
} else { } else {
// 추가 // 추가
const isNumberType = ["number", "decimal", "integer", "float", "double", "numeric", "currency"].includes(
column.inputType || "",
);
const newColumn = { const newColumn = {
key: column.columnName, key: column.columnName,
title: column.displayName, title: column.displayName,
width: "", width: "",
isJoinColumn: column.isJoinColumn || false, isJoinColumn: column.isJoinColumn || false,
inputType: column.inputType,
thousandSeparator: isNumberType ? true : undefined, // 숫자 타입은 기본적으로 천단위 구분자 사용
}; };
updateConfig("columns", [...configColumns, newColumn]); 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 updateColumnTitle = (columnKey: string, title: string) => {
const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col)); const newColumns = configColumns.map((col) => (col.key === columnKey ? { ...col, title } : col));
@ -387,29 +412,46 @@ export const UnifiedListConfigPanel: React.FC<UnifiedListConfigPanelProps> = ({
<div className="max-h-40 space-y-1 overflow-y-auto"> <div className="max-h-40 space-y-1 overflow-y-auto">
{configColumns.map((column, index) => { {configColumns.map((column, index) => {
const colInfo = columns.find((c) => c.columnName === column.key); const colInfo = columns.find((c) => c.columnName === column.key);
const showThousandSeparator = isNumberColumn(column.key);
return ( 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">
<GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" /> <div className="flex items-center gap-2">
{column.isJoinColumn ? ( <GripVertical className="text-muted-foreground h-3 w-3 cursor-grab" />
<Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" /> {column.isJoinColumn ? (
) : ( <Link2 className="h-3 w-3 flex-shrink-0 text-blue-500" />
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" /> ) : (
<Database className="text-muted-foreground h-3 w-3 flex-shrink-0" />
)}
<Input
value={column.title}
onChange={(e) => updateColumnTitle(column.key, e.target.value)}
placeholder="제목"
className="h-6 flex-1 text-xs"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
className="text-destructive h-6 w-6 p-0"
>
×
</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>
)} )}
<Input
value={column.title}
onChange={(e) => updateColumnTitle(column.key, e.target.value)}
placeholder="제목"
className="h-6 flex-1 text-xs"
/>
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => toggleColumn(colInfo || { columnName: column.key, displayName: column.title })}
className="text-destructive h-6 w-6 p-0"
>
×
</Button>
</div> </div>
); );
})} })}