지도쪽 가능하게 수정

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,48 +430,57 @@ 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">
-              {/* 데이터 소스 선택 */}
+              {/* 데이터 소스 선택 - 단일 데이터 소스 위젯에만 표시 */}
-              <div className="bg-background rounded-lg p-3 shadow-sm">
+              {!["map-summary-v2", "chart", "list-v2", "custom-metric-v2", "risk-alert-v2"].includes(
-                <Label className="mb-2 block text-xs font-semibold">데이터 소스</Label>
+                element.subtype,
+              ) && (
+                <div className="bg-background rounded-lg p-3 shadow-sm">
+                  <Label className="mb-2 block text-xs font-semibold">데이터 소스</Label>
 
-                <Tabs
+                  <Tabs
-                  value={dataSource.type}
+                    value={dataSource.type}
-                  onValueChange={(value) => handleDataSourceTypeChange(value as "database" | "api")}
+                    onValueChange={(value) => handleDataSourceTypeChange(value as "database" | "api")}
-                  className="w-full"
+                    className="w-full"
-                >
+                  >
-                  <TabsList className="bg-muted grid h-8 w-full grid-cols-2 p-0.5">
+                    <TabsList className="bg-muted grid h-8 w-full grid-cols-2 p-0.5">
-                    <TabsTrigger
+                      <TabsTrigger
-                      value="database"
+                        value="database"
-                      className="data-[state=active]:bg-background h-7 rounded text-xs data-[state=active]:shadow-sm"
+                        className="data-[state=active]:bg-background h-7 rounded text-xs data-[state=active]:shadow-sm"
-                    >
+                      >
-                      데이터베이스
+                        데이터베이스
-                    </TabsTrigger>
+                      </TabsTrigger>
-                    <TabsTrigger
+                      <TabsTrigger
-                      value="api"
+                        value="api"
-                      className="data-[state=active]:bg-background h-7 rounded text-xs data-[state=active]:shadow-sm"
+                        className="data-[state=active]:bg-background h-7 rounded text-xs data-[state=active]:shadow-sm"
-                    >
+                      >
-                      REST API
+                        REST API
-                    </TabsTrigger>
+                      </TabsTrigger>
-                  </TabsList>
+                    </TabsList>
 
-                  <TabsContent value="database" className="mt-2 space-y-2">
+                    <TabsContent value="database" className="mt-2 space-y-2">
-                    <DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
+                      <DatabaseConfig dataSource={dataSource} onChange={handleDataSourceUpdate} />
-                    <QueryEditor
+                      <QueryEditor
-                      dataSource={dataSource}
+                        dataSource={dataSource}
-                      onDataSourceChange={handleDataSourceUpdate}
+                        onDataSourceChange={handleDataSourceUpdate}
-                      onQueryTest={handleQueryTest}
+                        onQueryTest={handleQueryTest}
-                    />
+                      />
-                  </TabsContent>
+                    </TabsContent>
 
-                  <TabsContent value="api" className="mt-2 space-y-2">
+                    <TabsContent value="api" className="mt-2 space-y-2">
-                    <ApiConfig
+                      <ApiConfig
-                      dataSource={dataSource}
+                        dataSource={dataSource}
-                      onChange={handleDataSourceUpdate}
+                        onChange={handleDataSourceUpdate}
-                      onTestResult={handleQueryTest}
+                        onTestResult={handleQueryTest}
-                    />
+                      />
-                  </TabsContent>
+                    </TabsContent>
-                </Tabs>
+                  </Tabs>
-              </div>
+                </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" && (