fix: ActionConditionBuilder 모든 Select 중복 키 수정

수정된 위치:
- line 271: fromColumns (소스 필드)
- line 289: toColumns (소스 필드)
- line 623: fromColumns (필드 매핑)
- line 638: toColumns (필드 매핑)
- line 737: getAvailableFieldsForMapping (대상 필드)

모든 .map() 앞에 .filter() 추가:
- 빈 columnName 제외
- 중복 키 방지
- React 경고 해결
This commit is contained in:
kjs 2025-10-01 17:23:18 +09:00
parent c3e6eff0fe
commit 7bb70bdd3b
1 changed files with 55 additions and 45 deletions

View File

@ -268,17 +268,19 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
{fromColumns.length > 0 && ( {fromColumns.length > 0 && (
<> <>
<div className="text-muted-foreground px-2 py-1 text-xs font-medium">FROM </div> <div className="text-muted-foreground px-2 py-1 text-xs font-medium">FROM </div>
{fromColumns.map((column) => ( {fromColumns
<SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}> .filter((column) => column.columnName) // 빈 문자열 제외
<div className="flex items-center gap-2"> .map((column) => (
<span className="text-blue-600">📤</span> <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
<span>{column.displayName || column.columnName}</span> <div className="flex items-center gap-2">
<Badge variant="outline" className="text-xs"> <span className="text-blue-600">📤</span>
{column.webType || column.dataType} <span>{column.displayName || column.columnName}</span>
</Badge> <Badge variant="outline" className="text-xs">
</div> {column.webType || column.dataType}
</SelectItem> </Badge>
))} </div>
</SelectItem>
))}
</> </>
)} )}
@ -286,15 +288,17 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
{toColumns.length > 0 && ( {toColumns.length > 0 && (
<> <>
<div className="text-muted-foreground px-2 py-1 text-xs font-medium">TO </div> <div className="text-muted-foreground px-2 py-1 text-xs font-medium">TO </div>
{toColumns.map((column) => ( {toColumns
<SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}> .filter((column) => column.columnName) // 빈 문자열 제외
<div className="flex items-center gap-2"> .map((column) => (
<span className="text-green-600">📥</span> <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
<span>{column.displayName || column.columnName}</span> <div className="flex items-center gap-2">
<Badge variant="outline" className="text-xs"> <span className="text-green-600">📥</span>
{column.webType || column.dataType} <span>{column.displayName || column.columnName}</span>
</Badge> <Badge variant="outline" className="text-xs">
</div> {column.webType || column.dataType}
</Badge>
</div>
</SelectItem> </SelectItem>
))} ))}
</> </>
@ -616,14 +620,16 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
<div className="text-muted-foreground px-2 py-1 text-xs font-medium"> <div className="text-muted-foreground px-2 py-1 text-xs font-medium">
FROM FROM
</div> </div>
{fromColumns.map((column) => ( {fromColumns
<SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}> .filter((column) => column.columnName) // 빈 문자열 제외
<div className="flex items-center gap-2"> .map((column) => (
<span className="text-blue-600">📤</span> <SelectItem key={`from_${column.columnName}`} value={`from.${column.columnName}`}>
<span>{column.displayName || column.columnName}</span> <div className="flex items-center gap-2">
</div> <span className="text-blue-600">📤</span>
</SelectItem> <span>{column.displayName || column.columnName}</span>
))} </div>
</SelectItem>
))}
</> </>
)} )}
@ -631,13 +637,15 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
{toColumns.length > 0 && ( {toColumns.length > 0 && (
<> <>
<div className="text-muted-foreground px-2 py-1 text-xs font-medium">TO </div> <div className="text-muted-foreground px-2 py-1 text-xs font-medium">TO </div>
{toColumns.map((column) => ( {toColumns
<SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}> .filter((column) => column.columnName) // 빈 문자열 제외
<div className="flex items-center gap-2"> .map((column) => (
<span className="text-green-600">📥</span> <SelectItem key={`to_${column.columnName}`} value={`to.${column.columnName}`}>
<span>{column.displayName || column.columnName}</span> <div className="flex items-center gap-2">
</div> <span className="text-green-600">📥</span>
</SelectItem> <span>{column.displayName || column.columnName}</span>
</div>
</SelectItem>
))} ))}
</> </>
)} )}
@ -733,16 +741,18 @@ const ActionConditionBuilder: React.FC<ActionConditionBuilderProps> = ({
<SelectValue placeholder="대상 필드" /> <SelectValue placeholder="대상 필드" />
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{getAvailableFieldsForMapping(index).map((column) => ( {getAvailableFieldsForMapping(index)
<SelectItem key={column.columnName} value={column.columnName}> .filter((column) => column.columnName) // 빈 문자열 제외
<div className="flex items-center gap-2"> .map((column) => (
<span>{column.displayName || column.columnName}</span> <SelectItem key={column.columnName} value={column.columnName}>
<Badge variant="outline" className="text-xs"> <div className="flex items-center gap-2">
{column.webType || column.dataType} <span>{column.displayName || column.columnName}</span>
</Badge> <Badge variant="outline" className="text-xs">
</div> {column.webType || column.dataType}
</SelectItem> </Badge>
))} </div>
</SelectItem>
))}
</SelectContent> </SelectContent>
</Select> </Select>