fix: ModalRepeaterTable 빈 행 자동 표시 문제 해결
- 신규 등록 모달 오픈 시 빈 객체 필터링 기능 추가 - isEmptyRow 함수로 안전한 빈 객체 판단 (id 필드 체크) - useState 초기화 및 useEffect 동기화에 필터링 적용 - 수정 모달의 실제 데이터는 id 필드로 보호
This commit is contained in:
parent
a9135165d9
commit
1680163c61
|
|
@ -198,14 +198,43 @@ export function ModalRepeaterTableComponent({
|
|||
const columnName = component?.columnName;
|
||||
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 반영을 위해)
|
||||
const [localValue, setLocalValue] = useState<any[]>(externalValue);
|
||||
const [localValue, setLocalValue] = useState<any[]>(() => {
|
||||
return externalValue.filter((item) => !isEmptyRow(item));
|
||||
});
|
||||
|
||||
// 🆕 외부 값(formData, propValue) 변경 시 내부 상태 동기화
|
||||
useEffect(() => {
|
||||
// 빈 객체 필터링
|
||||
const filteredValue = externalValue.filter((item) => !isEmptyRow(item));
|
||||
|
||||
// 외부 값이 변경되었고, 내부 값과 다른 경우에만 동기화
|
||||
if (JSON.stringify(externalValue) !== JSON.stringify(localValue)) {
|
||||
setLocalValue(externalValue);
|
||||
if (JSON.stringify(filteredValue) !== JSON.stringify(localValue)) {
|
||||
setLocalValue(filteredValue);
|
||||
}
|
||||
}, [externalValue]);
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue