rest api 기능 구현

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

@@ -91,30 +91,31 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
         });
       }
 
-      // URL 구성
-      let url = dataSource.endpoint;
-      const queryString = params.toString();
-      if (queryString) {
-        url += (url.includes("?") ? "&" : "?") + queryString;
-      }
-
-      // 헤더 구성
-      const headers: Record<string, string> = {
-        "Content-Type": "application/json",
-        ...dataSource.headers,
-      };
-
-      // 외부 API 직접 호출
-      const response = await fetch(url, {
-        method: "GET",
-        headers,
+      // 백엔드 프록시를 통한 외부 API 호출 (CORS 우회)
+      const response = await fetch("http://localhost:8080/api/dashboards/fetch-external-api", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          url: dataSource.endpoint,
+          method: "GET",
+          headers: dataSource.headers || {},
+          queryParams: Object.fromEntries(params),
+        }),
       });
 
       if (!response.ok) {
         throw new Error(`HTTP ${response.status}: ${response.statusText}`);
       }
 
-      const apiData = await response.json();
+      const apiResponse = await response.json();
+
+      if (!apiResponse.success) {
+        throw new Error(apiResponse.message || "외부 API 호출 실패");
+      }
+
+      const apiData = apiResponse.data;
 
       // JSON Path 처리
       let data = apiData;
@@ -132,18 +133,43 @@ export function ApiConfig({ dataSource, onChange, onTestResult }: ApiConfigProps
       // 배열이 아니면 배열로 변환
       const rows = Array.isArray(data) ? data : [data];
 
-      // 컬럼 추출
-      const columns = rows.length > 0 ? Object.keys(rows[0]) : [];
+      if (rows.length === 0) {
+        throw new Error("API 응답에 데이터가 없습니다");
+      }
 
-      const result: QueryResult = {
+      // 컬럼 추출 및 타입 분석
+      const firstRow = rows[0];
+      const columns = Object.keys(firstRow);
+
+      // 각 컬럼의 타입 분석
+      const columnTypes: Record<string, string> = {};
+      columns.forEach((col) => {
+        const value = firstRow[col];
+        if (value === null || value === undefined) {
+          columnTypes[col] = "null";
+        } else if (Array.isArray(value)) {
+          columnTypes[col] = "array";
+        } else if (typeof value === "object") {
+          columnTypes[col] = "object";
+        } else if (typeof value === "number") {
+          columnTypes[col] = "number";
+        } else if (typeof value === "boolean") {
+          columnTypes[col] = "boolean";
+        } else {
+          columnTypes[col] = "string";
+        }
+      });
+
+      const queryResult: QueryResult = {
         columns,
         rows,
         totalRows: rows.length,
         executionTime: 0,
+        columnTypes, // 타입 정보 추가
       };
 
-      setTestResult(result);
-      onTestResult?.(result);
+      setTestResult(queryResult);
+      onTestResult?.(queryResult);
     } catch (err) {
       const errorMessage = err instanceof Error ? err.message : "알 수 없는 오류가 발생했습니다";
       setTestError(errorMessage);