집계 위젯 선택 이벤트 처리 기능 추가: AggregationWidgetComponent에서 다양한 선택 이벤트를 수신하여 필터링된 데이터를 설정하는 기능을 구현하였습니다. 또한, AggregationWidgetConfigPanel에 카테고리 값 콤보박스를 추가하여 사용자에게 더 나은 선택 경험을 제공하도록 개선하였습니다. 이로 인해 데이터 소스 타입이 "selection"인 경우의 데이터 처리 로직이 강화되었습니다.

This commit is contained in:
kjs
2026-01-19 15:31:01 +09:00
parent d45443521d
commit e785dbbe6e
2 changed files with 248 additions and 16 deletions

View File

@@ -260,6 +260,7 @@ export function AggregationWidgetComponent({
}, [dataSourceType, autoRefresh, refreshInterval, isDesignMode, fetchTableData]);
// 선택된 행 집계 (dataSourceType === "selection"일 때)
// props로 전달된 selectedRows 사용
const selectedRowsKey = JSON.stringify(selectedRows);
useEffect(() => {
if (dataSourceType === "selection" && Array.isArray(selectedRows) && selectedRows.length > 0) {
@@ -268,6 +269,82 @@ export function AggregationWidgetComponent({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dataSourceType, selectedRowsKey]);
// 전역 선택 이벤트 수신 (dataSourceType === "selection"일 때)
useEffect(() => {
if (dataSourceType !== "selection" || isDesignMode) return;
// 테이블리스트에서 발생하는 선택 이벤트 수신
// tableListDataChange 이벤트의 data가 선택된 행들임
const handleTableListDataChange = (event: CustomEvent) => {
const { data: eventData, selectedRows: eventSelectedRows } = event.detail || {};
// data가 선택된 행 데이터 배열
const rows = eventData || [];
if (Array.isArray(rows)) {
// 필터 적용
const filteredData = applyFilters(
rows,
filtersRef.current || [],
filterLogic,
formDataRef.current,
selectedRowsRef.current
);
setData(filteredData);
}
};
// 리피터에서 발생하는 이벤트
const handleRepeaterDataChange = (event: CustomEvent) => {
const { data: eventData, selectedData } = event.detail || {};
const rows = selectedData || eventData || [];
if (Array.isArray(rows)) {
const filteredData = applyFilters(
rows,
filtersRef.current || [],
filterLogic,
formDataRef.current,
selectedRowsRef.current
);
setData(filteredData);
}
};
// 일반 선택 이벤트
const handleSelectionChange = (event: CustomEvent) => {
const { selectedRows: eventSelectedRows, selectedData, checkedRows, selectedItems } = event.detail || {};
const rows = selectedData || eventSelectedRows || checkedRows || selectedItems || [];
if (Array.isArray(rows)) {
const filteredData = applyFilters(
rows,
filtersRef.current || [],
filterLogic,
formDataRef.current,
selectedRowsRef.current
);
setData(filteredData);
}
};
// 다양한 선택 이벤트 수신
window.addEventListener("tableListDataChange" as any, handleTableListDataChange);
window.addEventListener("repeaterDataChange" as any, handleRepeaterDataChange);
window.addEventListener("selectionChange" as any, handleSelectionChange);
window.addEventListener("tableSelectionChange" as any, handleSelectionChange);
window.addEventListener("rowSelectionChange" as any, handleSelectionChange);
window.addEventListener("checkboxSelectionChange" as any, handleSelectionChange);
return () => {
window.removeEventListener("tableListDataChange" as any, handleTableListDataChange);
window.removeEventListener("repeaterDataChange" as any, handleRepeaterDataChange);
window.removeEventListener("selectionChange" as any, handleSelectionChange);
window.removeEventListener("tableSelectionChange" as any, handleSelectionChange);
window.removeEventListener("rowSelectionChange" as any, handleSelectionChange);
window.removeEventListener("checkboxSelectionChange" as any, handleSelectionChange);
};
}, [dataSourceType, isDesignMode, filterLogic]);
// 외부 데이터가 있으면 사용
const externalDataKey = externalData ? JSON.stringify(externalData.slice(0, 5)) : null; // 첫 5개만 비교
useEffect(() => {