fix: ModalRepeaterTable 빈 행 자동 표시 문제 해결

- 신규 등록 모달 오픈 시 빈 객체 필터링 기능 추가
- isEmptyRow 함수로 안전한 빈 객체 판단 (id 필드 체크)
- useState 초기화 및 useEffect 동기화에 필터링 적용
- 수정 모달의 실제 데이터는 id 필드로 보호
This commit is contained in:
SeongHyun Kim 2025-12-12 11:10:51 +09:00
parent a9135165d9
commit 1680163c61
1 changed files with 32 additions and 3 deletions

View File

@ -198,14 +198,43 @@ export function ModalRepeaterTableComponent({
const columnName = component?.columnName; const columnName = component?.columnName;
const externalValue = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || []; const externalValue = (columnName && formData?.[columnName]) || componentConfig?.value || propValue || [];
// 빈 객체 판단 함수 (수정 모달의 실제 데이터는 유지)
const isEmptyRow = (item: any): boolean => {
if (!item || typeof item !== 'object') return true;
// id가 있으면 실제 데이터 (수정 모달)
if (item.id) return false;
// 모든 값이 비어있는지 확인 (계산 필드 제외)
const hasValue = Object.entries(item).some(([key, value]) => {
// 계산 필드나 메타데이터는 제외
if (key.startsWith('_') || key === 'total_amount') return false;
// 실제 값이 있는지 확인
return value !== undefined &&
value !== null &&
value !== '' &&
value !== 0 &&
value !== '0' &&
value !== '0.00';
});
return !hasValue;
};
// 🆕 내부 상태로 데이터 관리 (즉시 UI 반영을 위해) // 🆕 내부 상태로 데이터 관리 (즉시 UI 반영을 위해)
const [localValue, setLocalValue] = useState<any[]>(externalValue); const [localValue, setLocalValue] = useState<any[]>(() => {
return externalValue.filter((item) => !isEmptyRow(item));
});
// 🆕 외부 값(formData, propValue) 변경 시 내부 상태 동기화 // 🆕 외부 값(formData, propValue) 변경 시 내부 상태 동기화
useEffect(() => { useEffect(() => {
// 빈 객체 필터링
const filteredValue = externalValue.filter((item) => !isEmptyRow(item));
// 외부 값이 변경되었고, 내부 값과 다른 경우에만 동기화 // 외부 값이 변경되었고, 내부 값과 다른 경우에만 동기화
if (JSON.stringify(externalValue) !== JSON.stringify(localValue)) { if (JSON.stringify(filteredValue) !== JSON.stringify(localValue)) {
setLocalValue(externalValue); setLocalValue(filteredValue);
} }
}, [externalValue]); }, [externalValue]);