feat(TableSection): 날짜 컬럼 일괄 적용 기능 추가

TableColumnConfig에 batchApply 속성 추가
날짜 타입 컬럼 설정 시 "일괄 적용" 스위치 표시
첫 번째 날짜 입력 시 모든 행에 자동 적용
중복 적용 방지를 위한 batchAppliedFields 플래그 관리
데이터 전체 삭제 시 플래그 리셋
This commit is contained in:
SeongHyun Kim 2025-12-19 14:07:35 +09:00
parent 228fd33a2a
commit 9684a83f37
3 changed files with 57 additions and 4 deletions

View File

@ -336,6 +336,9 @@ export function TableSectionRenderer({
// 동적 데이터 소스 활성화 상태 // 동적 데이터 소스 활성화 상태
const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({}); const [activeDataSources, setActiveDataSources] = useState<Record<string, string>>({});
// 날짜 일괄 적용 완료 플래그 (컬럼별로 한 번만 적용)
const [batchAppliedFields, setBatchAppliedFields] = useState<Set<string>>(new Set());
// RepeaterColumnConfig로 변환 // RepeaterColumnConfig로 변환
const columns: RepeaterColumnConfig[] = (tableConfig.columns || []).map(convertToRepeaterColumn); const columns: RepeaterColumnConfig[] = (tableConfig.columns || []).map(convertToRepeaterColumn);
@ -381,13 +384,43 @@ export function TableSectionRenderer({
[calculateRow] [calculateRow]
); );
// 데이터 변경 핸들러 // 데이터 변경 핸들러 (날짜 일괄 적용 로직 포함)
const handleDataChange = useCallback( const handleDataChange = useCallback(
(newData: any[]) => { (newData: any[]) => {
setTableData(newData); let processedData = newData;
onTableDataChange(newData);
// 날짜 일괄 적용 로직: batchApply가 활성화된 날짜 컬럼 처리
const batchApplyColumns = tableConfig.columns.filter(
(col) => col.type === "date" && col.batchApply === true
);
for (const dateCol of batchApplyColumns) {
// 이미 일괄 적용된 컬럼은 건너뜀
if (batchAppliedFields.has(dateCol.field)) continue;
// 해당 컬럼에 값이 있는 행과 없는 행 분류
const itemsWithDate = processedData.filter((item) => item[dateCol.field]);
const itemsWithoutDate = processedData.filter((item) => !item[dateCol.field]);
// 조건: 정확히 1개만 날짜가 있고, 나머지는 모두 비어있을 때
if (itemsWithDate.length === 1 && itemsWithoutDate.length > 0) {
const selectedDate = itemsWithDate[0][dateCol.field];
// 모든 행에 동일한 날짜 적용
processedData = processedData.map((item) => ({
...item,
[dateCol.field]: selectedDate,
}));
// 플래그 활성화 (이후 개별 수정 가능)
setBatchAppliedFields((prev) => new Set([...prev, dateCol.field]));
}
}
setTableData(processedData);
onTableDataChange(processedData);
}, },
[onTableDataChange] [onTableDataChange, tableConfig.columns, batchAppliedFields]
); );
// 행 변경 핸들러 // 행 변경 핸들러
@ -416,6 +449,11 @@ export function TableSectionRenderer({
const newData = tableData.filter((_, index) => !selectedRows.has(index)); const newData = tableData.filter((_, index) => !selectedRows.has(index));
handleDataChange(newData); handleDataChange(newData);
setSelectedRows(new Set()); setSelectedRows(new Set());
// 데이터가 모두 삭제되면 일괄 적용 플래그도 리셋
if (newData.length === 0) {
setBatchAppliedFields(new Set());
}
}, [tableData, selectedRows, handleDataChange]); }, [tableData, selectedRows, handleDataChange]);
// 아이템 추가 핸들러 (모달에서 선택) // 아이템 추가 핸들러 (모달에서 선택)

View File

@ -419,6 +419,17 @@ function ColumnSettingItem({
</span> </span>
</label> </label>
{/* 날짜 타입일 때만 일괄 적용 옵션 표시 */}
{col.type === "date" && (
<label className="flex items-center gap-2 text-xs cursor-pointer" title="첫 번째 날짜 입력 시 모든 행에 동일하게 적용">
<Switch
checked={col.batchApply ?? false}
onCheckedChange={(checked) => onUpdate({ batchApply: checked })}
className="scale-75"
/>
<span> </span>
</label>
)}
</div> </div>
{/* 조회 설정 (조회 ON일 때만 표시) */} {/* 조회 설정 (조회 ON일 때만 표시) */}

View File

@ -331,6 +331,10 @@ export interface TableColumnConfig {
// 조회 설정 (동적 값 조회) // 조회 설정 (동적 값 조회)
lookup?: LookupConfig; lookup?: LookupConfig;
// 날짜 일괄 적용 (type이 "date"일 때만 사용)
// 활성화 시 첫 번째 날짜 입력 시 모든 행에 동일한 날짜가 자동 적용됨
batchApply?: boolean;
} }
// ============================================ // ============================================