디벨롭

frontend/components/admin/dashboard/data-sources/MultiDataSourceConfig.tsx

@@ -4,10 +4,16 @@ import React, { useState } from "react";
 import { ChartDataSource } from "@/components/admin/dashboard/types";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Plus, Trash2 } from "lucide-react";
+import { Plus, Trash2, Database, Globe } from "lucide-react";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import MultiApiConfig from "./MultiApiConfig";
 import MultiDatabaseConfig from "./MultiDatabaseConfig";
 
@@ -25,18 +31,20 @@ export default function MultiDataSourceConfig({
   );
   const [previewData, setPreviewData] = useState<any[]>([]);
   const [showPreview, setShowPreview] = useState(false);
+  const [showAddMenu, setShowAddMenu] = useState(false);
 
-  // 새 데이터 소스 추가
-  const handleAddDataSource = () => {
+  // 새 데이터 소스 추가 (타입 지정)
+  const handleAddDataSource = (type: "api" | "database") => {
     const newId = Date.now().toString();
     const newSource: ChartDataSource = {
       id: newId,
-      name: `데이터 소스 ${dataSources.length + 1}`,
-      type: "api",
+      name: `${type === "api" ? "REST API" : "Database"} ${dataSources.length + 1}`,
+      type,
     };
     
     onChange([...dataSources, newSource]);
     setActiveTab(newId);
+    setShowAddMenu(false);
   };
 
   // 데이터 소스 삭제

frontend/components/admin/dashboard/data-sources/MultiDatabaseConfig.tsx

@@ -65,28 +65,35 @@ export default function MultiDatabaseConfig({ dataSource, onChange }: MultiDatab
     setTestResult(null);
 
     try {
-      const response = await fetch("/api/dashboards/query", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        credentials: "include",
-        body: JSON.stringify({
-          connectionType: dataSource.connectionType || "current",
-          externalConnectionId: dataSource.externalConnectionId,
-          query: dataSource.query,
-        }),
-      });
-
-      const result = await response.json();
-
-      if (result.success) {
-        const rowCount = Array.isArray(result.data) ? result.data.length : 0;
+      // dashboardApi 사용 (인증 토큰 자동 포함)
+      const { dashboardApi } = await import("@/lib/api/dashboard");
+      
+      if (dataSource.connectionType === "external" && dataSource.externalConnectionId) {
+        // 외부 DB
+        const { ExternalDbConnectionAPI } = await import("@/lib/api/externalDbConnection");
+        const result = await ExternalDbConnectionAPI.executeQuery(
+          parseInt(dataSource.externalConnectionId),
+          dataSource.query
+        );
+        
+        if (result.success && result.data) {
+          const rowCount = Array.isArray(result.data.rows) ? result.data.rows.length : 0;
+          setTestResult({
+            success: true,
+            message: "쿼리 실행 성공",
+            rowCount,
+          });
+        } else {
+          setTestResult({ success: false, message: result.message || "쿼리 실행 실패" });
+        }
+      } else {
+        // 현재 DB
+        const result = await dashboardApi.executeQuery(dataSource.query);
         setTestResult({
           success: true,
           message: "쿼리 실행 성공",
-          rowCount,
+          rowCount: result.rowCount || 0,
         });
-      } else {
-        setTestResult({ success: false, message: result.message || "쿼리 실행 실패" });
       }
     } catch (error: any) {
       setTestResult({ success: false, message: error.message || "네트워크 오류" });