diff --git a/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx new file mode 100644 index 00000000..0c3e073d --- /dev/null +++ b/frontend/components/v2/config-panels/V2AggregationWidgetConfigPanel.tsx @@ -0,0 +1,57 @@ +"use client"; + +/** + * V2AggregationWidget 설정 패널 + * 기존 AggregationWidgetConfigPanel의 모든 로직(테이블/컬럼 Combobox, 집계 항목 관리, + * 필터 조건, 데이터 소스 선택, 스타일 설정 등)을 유지하면서 + * componentConfigChanged 이벤트를 추가하여 실시간 업데이트 지원 + */ + +import React from "react"; +import { AggregationWidgetConfigPanel } from "@/lib/registry/components/v2-aggregation-widget/AggregationWidgetConfigPanel"; +import type { AggregationWidgetConfig } from "@/lib/registry/components/v2-aggregation-widget/types"; + +interface V2AggregationWidgetConfigPanelProps { + config: AggregationWidgetConfig; + onChange: (config: Partial) => void; + screenTableName?: string; + screenComponents?: Array<{ + id: string; + componentType: string; + label?: string; + tableName?: string; + columnName?: string; + }>; +} + +export const V2AggregationWidgetConfigPanel: React.FC = ({ + config, + onChange, + screenTableName, + screenComponents, +}) => { + const handleChange = (newConfig: Partial) => { + onChange(newConfig); + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("componentConfigChanged", { + detail: { config: { ...config, ...newConfig } }, + }) + ); + } + }; + + return ( + + ); +}; + +V2AggregationWidgetConfigPanel.displayName = "V2AggregationWidgetConfigPanel"; + +export default V2AggregationWidgetConfigPanel; diff --git a/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx b/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx new file mode 100644 index 00000000..6d52d999 --- /dev/null +++ b/frontend/components/v2/config-panels/V2TableGroupedConfigPanel.tsx @@ -0,0 +1,45 @@ +"use client"; + +/** + * V2TableGrouped 설정 패널 + * 기존 TableGroupedConfigPanel의 모든 로직(테이블 Combobox, 컬럼 관리, 그룹화 설정, + * 체크박스/페이지네이션/연결 필터 등)을 유지하면서 + * componentConfigChanged 이벤트를 추가하여 실시간 업데이트 지원 + */ + +import React from "react"; +import { TableGroupedConfigPanel } from "@/lib/registry/components/v2-table-grouped/TableGroupedConfigPanel"; +import type { TableGroupedConfig } from "@/lib/registry/components/v2-table-grouped/types"; + +interface V2TableGroupedConfigPanelProps { + config: TableGroupedConfig; + onChange: (newConfig: Partial) => void; +} + +export const V2TableGroupedConfigPanel: React.FC = ({ + config, + onChange, +}) => { + const handleChange = (newConfig: Partial) => { + onChange(newConfig); + + if (typeof window !== "undefined") { + window.dispatchEvent( + new CustomEvent("componentConfigChanged", { + detail: { config: { ...config, ...newConfig } }, + }) + ); + } + }; + + return ( + + ); +}; + +V2TableGroupedConfigPanel.displayName = "V2TableGroupedConfigPanel"; + +export default V2TableGroupedConfigPanel; diff --git a/frontend/lib/registry/components/v2-aggregation-widget/index.ts b/frontend/lib/registry/components/v2-aggregation-widget/index.ts index 75eb0e52..50933f59 100644 --- a/frontend/lib/registry/components/v2-aggregation-widget/index.ts +++ b/frontend/lib/registry/components/v2-aggregation-widget/index.ts @@ -3,7 +3,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition"; import { ComponentCategory } from "@/types/component"; import { AggregationWidgetWrapper } from "./AggregationWidgetComponent"; -import { AggregationWidgetConfigPanel } from "./AggregationWidgetConfigPanel"; +import { V2AggregationWidgetConfigPanel } from "@/components/v2/config-panels/V2AggregationWidgetConfigPanel"; import type { AggregationWidgetConfig } from "./types"; /** @@ -34,7 +34,7 @@ export const V2AggregationWidgetDefinition = createComponentDefinition({ refreshOnFormChange: true, // 폼 변경 시 자동 새로고침 } as Partial, defaultSize: { width: 400, height: 60 }, - configPanel: AggregationWidgetConfigPanel, + configPanel: V2AggregationWidgetConfigPanel, icon: "Calculator", tags: ["집계", "합계", "평균", "개수", "통계", "데이터", "필터"], version: "1.1.0", diff --git a/frontend/lib/registry/components/v2-table-grouped/index.ts b/frontend/lib/registry/components/v2-table-grouped/index.ts index 7e984490..256fdfe9 100644 --- a/frontend/lib/registry/components/v2-table-grouped/index.ts +++ b/frontend/lib/registry/components/v2-table-grouped/index.ts @@ -5,7 +5,7 @@ import { createComponentDefinition } from "../../utils/createComponentDefinition import { ComponentCategory } from "@/types/component"; import type { WebType } from "@/types/screen"; import { TableGroupedComponent } from "./TableGroupedComponent"; -import { TableGroupedConfigPanel } from "./TableGroupedConfigPanel"; +import { V2TableGroupedConfigPanel } from "@/components/v2/config-panels/V2TableGroupedConfigPanel"; import { TableGroupedConfig } from "./types"; /** @@ -63,7 +63,7 @@ export const V2TableGroupedDefinition = createComponentDefinition({ maxHeight: 600, }, defaultSize: { width: 800, height: 500 }, - configPanel: TableGroupedConfigPanel, + configPanel: V2TableGroupedConfigPanel, icon: "Layers", tags: ["테이블", "그룹화", "접기", "펼치기", "목록"], version: "1.0.0",