fix: 항목 표시 설정을 그룹별로 분리

- FieldGroup에 displayItems 추가 (그룹별 독립적인 표시 설정)
- SelectedItemsDetailInputConfig에서 전역 displayItems 제거
- renderDisplayItems에 groupId 파라미터 추가하여 그룹별 설정 사용
- 설정 패널에서 그룹별로 displayItems 관리
- 각 그룹마다 다른 표시 형식 가능 (예: 거래처 정보 vs 단가 정보)
- 그룹의 필드만 선택 가능하도록 필터링
This commit is contained in:
kjs
2025-11-18 10:21:36 +09:00
parent e234f88577
commit eef1451c5a
3 changed files with 228 additions and 277 deletions

View File

@@ -544,13 +544,19 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
}
};
// 🆕 displayItems를 렌더링하는 헬퍼 함수
const renderDisplayItems = useCallback((entry: GroupEntry, item: ItemData) => {
const displayItems = componentConfig.displayItems || [];
// 🆕 displayItems를 렌더링하는 헬퍼 함수 (그룹별)
const renderDisplayItems = useCallback((entry: GroupEntry, item: ItemData, groupId: string) => {
// 🆕 해당 그룹의 displayItems 가져오기
const group = (componentConfig.fieldGroups || []).find(g => g.id === groupId);
const displayItems = group?.displayItems || [];
if (displayItems.length === 0) {
// displayItems가 없으면 기본 방식 (모든 필드 나열)
const fields = componentConfig.additionalFields || [];
// displayItems가 없으면 기본 방식 (해당 그룹의 필드 나열)
const fields = (componentConfig.additionalFields || []).filter(f =>
componentConfig.fieldGroups && componentConfig.fieldGroups.length > 0
? f.groupId === groupId
: true
);
return fields.map((f) => entry[f.name] || "-").join(" / ");
}
@@ -694,7 +700,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
})}
</>
);
}, [componentConfig.displayItems, componentConfig.additionalFields]);
}, [componentConfig.fieldGroups, componentConfig.additionalFields]);
// 빈 상태 렌더링
if (items.length === 0) {
@@ -805,7 +811,7 @@ export const SelectedItemsDetailInputComponent: React.FC<SelectedItemsDetailInpu
onClick={() => handleEditGroupEntry(item.id, group.id, entry.id)}
>
<span className="flex items-center gap-1">
{idx + 1}. {renderDisplayItems(entry, item)}
{idx + 1}. {renderDisplayItems(entry, item, group.id)}
</span>
<Button
type="button"