지도쪽 가능하게 수정

frontend/components/admin/dashboard/WidgetConfigSidebar.tsx

@@ -25,6 +25,7 @@ import { ChartConfigSection } from "./widget-sections/ChartConfigSection";
 import { CustomMetricSection } from "./widget-sections/CustomMetricSection";
 import { MapConfigSection } from "./widget-sections/MapConfigSection";
 import { RiskAlertSection } from "./widget-sections/RiskAlertSection";
+import MultiDataSourceConfig from "@/components/admin/dashboard/data-sources/MultiDataSourceConfig";
 
 interface WidgetConfigSidebarProps {
   element: DashboardElement | null;
@@ -121,6 +122,9 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
     refreshInterval: 0,
   });
 
+  // 다중 데이터 소스 상태 추가
+  const [dataSources, setDataSources] = useState<ChartDataSource[]>(element?.dataSources || []);
+
   // 쿼리 결과
   const [queryResult, setQueryResult] = useState<QueryResult | null>(null);
 
@@ -148,6 +152,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       setCustomTitle(element.customTitle || "");
       setShowHeader(element.showHeader !== false);
       setDataSource(element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 });
+      setDataSources(element.dataSources || []);
       setQueryResult(null);
 
       // 리스트 위젯 설정 초기화
@@ -176,6 +181,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
       setCustomTitle("");
       setShowHeader(true);
       setDataSource({ type: "database", connectionType: "current", refreshInterval: 0 });
+      setDataSources([]);
       setQueryResult(null);
       setListConfig({
         viewMode: "table",
@@ -228,6 +234,11 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
     setDataSource((prev) => ({ ...prev, ...updates }));
   }, []);
 
+  // 다중 데이터 소스 변경 핸들러
+  const handleDataSourcesChange = useCallback((updatedSources: ChartDataSource[]) => {
+    setDataSources(updatedSources);
+  }, []);
+
   // 쿼리 테스트 결과 처리
   const handleQueryTest = useCallback(
     (result: QueryResult) => {
@@ -289,7 +300,7 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
             // 다중 데이터 소스 위젯은 dataSources도 포함
             ...(isMultiDataSourceWidget
               ? {
-                  dataSources: element.dataSources || [],
+                  dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [],
                 }
               : {}),
           }
@@ -307,12 +318,12 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         ? {
             // 다중 데이터 소스 위젯은 chartConfig에 dataSources 포함
             chartConfig: isMultiDataSourceWidget
-              ? { ...chartConfig, dataSources: element.dataSources || [] }
+              ? { ...chartConfig, dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [] }
               : chartConfig,
             // 프론트엔드 호환성을 위해 dataSources도 element에 직접 포함
             ...(isMultiDataSourceWidget
               ? {
-                  dataSources: element.dataSources || [],
+                  dataSources: dataSources.length > 0 ? dataSources : element.dataSources || [],
                 }
               : {}),
           }
@@ -327,7 +338,18 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
 
     onApply(updatedElement);
     onClose();
-  }, [element, customTitle, showHeader, dataSource, listConfig, chartConfig, customMetricConfig, onApply, onClose]);
+  }, [
+    element,
+    customTitle,
+    showHeader,
+    dataSource,
+    dataSources,
+    listConfig,
+    chartConfig,
+    customMetricConfig,
+    onApply,
+    onClose,
+  ]);
 
   if (!element) return null;
 
@@ -408,7 +430,10 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
         {hasDataTab && (
           <TabsContent value="data" className="mt-0 flex-1 overflow-y-auto p-3">
             <div className="space-y-3">
-              {/* 데이터 소스 선택 */}
+              {/* 데이터 소스 선택 - 단일 데이터 소스 위젯에만 표시 */}
+              {!["map-summary-v2", "chart", "list-v2", "custom-metric-v2", "risk-alert-v2"].includes(
+                element.subtype,
+              ) && (
                 <div className="bg-background rounded-lg p-3 shadow-sm">
                   <Label className="mb-2 block text-xs font-semibold">데이터 소스</Label>
 
@@ -450,6 +475,12 @@ export function WidgetConfigSidebar({ element, isOpen, onClose, onApply }: Widge
                     </TabsContent>
                   </Tabs>
                 </div>
+              )}
+
+              {/* 다중 데이터 소스 설정 */}
+              {["map-summary-v2", "chart", "list-v2", "custom-metric-v2", "risk-alert-v2"].includes(
+                element.subtype,
+              ) && <MultiDataSourceConfig dataSources={dataSources} onChange={handleDataSourcesChange} />}
 
               {/* 위젯별 커스텀 섹션 */}
               {element.subtype === "list-v2" && (