restapi 여러개 띄우는거 작업 가능하게 하는거 진행중

frontend/components/admin/dashboard/ElementConfigModal.tsx

@@ -5,6 +5,7 @@ import { DashboardElement, ChartDataSource, ChartConfig, QueryResult } from "./t
 import { QueryEditor } from "./QueryEditor";
 import { ChartConfigPanel } from "./ChartConfigPanel";
 import { VehicleMapConfigPanel } from "./VehicleMapConfigPanel";
+import { MapTestConfigPanel } from "./MapTestConfigPanel";
 import { DataSourceSelector } from "./data-sources/DataSourceSelector";
 import { DatabaseConfig } from "./data-sources/DatabaseConfig";
 import { ApiConfig } from "./data-sources/ApiConfig";
@@ -17,6 +18,7 @@ interface ElementConfigModalProps {
   isOpen: boolean;
   onClose: () => void;
   onSave: (element: DashboardElement) => void;
+  onPreview?: (element: DashboardElement) => void; // 실시간 미리보기용 (저장 전)
 }
 
 /**
@@ -24,7 +26,7 @@ interface ElementConfigModalProps {
  * - 2단계 플로우: 데이터 소스 선택 → 데이터 설정 및 차트 설정
  * - 새로운 데이터 소스 컴포넌트 통합
  */
-export function ElementConfigModal({ element, isOpen, onClose, onSave }: ElementConfigModalProps) {
+export function ElementConfigModal({ element, isOpen, onClose, onSave, onPreview }: ElementConfigModalProps) {
   const [dataSource, setDataSource] = useState<ChartDataSource>(
     element.dataSource || { type: "database", connectionType: "current", refreshInterval: 0 },
   );
@@ -61,7 +63,7 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
     element.subtype === "calculator"; // 계산기 위젯 (자체 기능)
 
   // 지도 위젯 (위도/경도 매핑 필요)
-  const isMapWidget = element.subtype === "vehicle-map" || element.subtype === "map-summary";
+  const isMapWidget = element.subtype === "vehicle-map" || element.subtype === "map-summary" || element.subtype === "map-test";
 
   // 주석
   // 모달이 열릴 때 초기화
@@ -132,7 +134,18 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
   // 차트 설정 변경 처리
   const handleChartConfigChange = useCallback((newConfig: ChartConfig) => {
     setChartConfig(newConfig);
-  }, []);
+    
+    // 🎯 실시간 미리보기: chartConfig 변경 시 즉시 부모에게 전달
+    if (onPreview) {
+      onPreview({
+        ...element,
+        chartConfig: newConfig,
+        dataSource: dataSource,
+        customTitle: customTitle,
+        showHeader: showHeader,
+      });
+    }
+  }, [element, dataSource, customTitle, showHeader, onPreview]);
 
   // 쿼리 테스트 결과 처리
   const handleQueryTest = useCallback((result: QueryResult) => {
@@ -208,12 +221,16 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
       ? // 간단한 위젯: 2단계에서 쿼리 테스트 후 저장 가능 (차트 설정 불필요)
         currentStep === 2 && queryResult && queryResult.rows.length > 0
       : isMapWidget
-        ? // 지도 위젯: 위도/경도 매핑 필요
-          currentStep === 2 &&
-          queryResult &&
-          queryResult.rows.length > 0 &&
-          chartConfig.latitudeColumn &&
-          chartConfig.longitudeColumn
+        ? // 지도 위젯: 타일맵 URL 또는 위도/경도 매핑 필요
+          element.subtype === "map-test"
+            ? // 🧪 지도 테스트 위젯: 타일맵 URL만 있으면 저장 가능
+              currentStep === 2 && chartConfig.tileMapUrl
+            : // 기존 지도 위젯: 쿼리 결과 + 위도/경도 필수
+              currentStep === 2 &&
+              queryResult &&
+              queryResult.rows.length > 0 &&
+              chartConfig.latitudeColumn &&
+              chartConfig.longitudeColumn
         : // 차트: 기존 로직 (2단계에서 차트 설정 필요)
           currentStep === 2 &&
           queryResult &&
@@ -324,7 +341,15 @@ export function ElementConfigModal({ element, isOpen, onClose, onSave }: Element
                   <div>
                     {isMapWidget ? (
                       // 지도 위젯: 위도/경도 매핑 패널
-                      queryResult && queryResult.rows.length > 0 ? (
+                      element.subtype === "map-test" ? (
+                        // 🧪 지도 테스트 위젯: 타일맵 URL 필수, 마커 데이터 선택사항
+                        <MapTestConfigPanel
+                          config={chartConfig}
+                          queryResult={queryResult || undefined}
+                          onConfigChange={handleChartConfigChange}
+                        />
+                      ) : queryResult && queryResult.rows.length > 0 ? (
+                        // 기존 지도 위젯: 쿼리 결과 필수
                         <VehicleMapConfigPanel
                           config={chartConfig}
                           queryResult={queryResult}