2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 대시보드 API 클라이언트
|
|
|
|
|
*/
|
|
|
|
|
|
2025-10-15 15:05:20 +09:00
|
|
|
import { DashboardElement } from "@/components/admin/dashboard/types";
|
2025-10-24 09:37:12 +09:00
|
|
|
|
|
|
|
|
// API URL 동적 설정
|
|
|
|
|
function getApiBaseUrl(): string {
|
|
|
|
|
// 클라이언트 사이드에서만 실행
|
|
|
|
|
if (typeof window !== "undefined") {
|
|
|
|
|
const hostname = window.location.hostname;
|
|
|
|
|
|
|
|
|
|
// 프로덕션: v1.vexplor.com → https://api.vexplor.com/api
|
|
|
|
|
if (hostname === "v1.vexplor.com") {
|
|
|
|
|
return "https://api.vexplor.com/api";
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 로컬 개발: localhost → http://localhost:8080/api
|
|
|
|
|
if (hostname === "localhost" || hostname === "127.0.0.1") {
|
|
|
|
|
return "http://localhost:8080/api";
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 서버 사이드 렌더링 시 기본값
|
|
|
|
|
return "/api";
|
|
|
|
|
}
|
2025-10-01 12:06:24 +09:00
|
|
|
|
|
|
|
|
// 토큰 가져오기 (실제 인증 시스템에 맞게 수정)
|
|
|
|
|
function getAuthToken(): string | null {
|
2025-10-15 15:05:20 +09:00
|
|
|
if (typeof window === "undefined") return null;
|
|
|
|
|
return localStorage.getItem("authToken") || sessionStorage.getItem("authToken");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// API 요청 헬퍼
|
|
|
|
|
async function apiRequest<T>(
|
2025-10-15 15:05:20 +09:00
|
|
|
endpoint: string,
|
|
|
|
|
options: RequestInit = {},
|
2025-10-01 12:06:24 +09:00
|
|
|
): Promise<{ success: boolean; data?: T; message?: string; pagination?: any }> {
|
|
|
|
|
const token = getAuthToken();
|
2025-10-24 09:37:12 +09:00
|
|
|
const API_BASE_URL = getApiBaseUrl();
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const config: RequestInit = {
|
2025-10-28 17:40:48 +09:00
|
|
|
credentials: "include", // ⭐ 세션 쿠키 전송 필수
|
2025-10-01 12:06:24 +09:00
|
|
|
headers: {
|
2025-10-15 15:05:20 +09:00
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
...(token && { Authorization: `Bearer ${token}` }),
|
2025-10-01 12:06:24 +09:00
|
|
|
...options.headers,
|
|
|
|
|
},
|
|
|
|
|
...options,
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
const response = await fetch(`${API_BASE_URL}${endpoint}`, config);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
// 응답이 JSON이 아닐 수도 있으므로 안전하게 처리
|
|
|
|
|
let result;
|
|
|
|
|
try {
|
|
|
|
|
result = await response.json();
|
|
|
|
|
} catch (jsonError) {
|
2025-10-15 15:05:20 +09:00
|
|
|
console.error("JSON Parse Error:", jsonError);
|
2025-10-01 12:06:24 +09:00
|
|
|
throw new Error(`서버 응답을 파싱할 수 없습니다. Status: ${response.status}`);
|
|
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!response.ok) {
|
2025-10-15 15:05:20 +09:00
|
|
|
console.error("API Error Response:", {
|
2025-10-01 12:06:24 +09:00
|
|
|
status: response.status,
|
|
|
|
|
statusText: response.statusText,
|
2025-10-15 15:05:20 +09:00
|
|
|
result,
|
2025-10-01 12:06:24 +09:00
|
|
|
});
|
|
|
|
|
throw new Error(result.message || `HTTP ${response.status}: ${response.statusText}`);
|
|
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result;
|
|
|
|
|
} catch (error: any) {
|
2025-10-15 15:05:20 +09:00
|
|
|
console.error("API Request Error:", {
|
2025-10-01 12:06:24 +09:00
|
|
|
endpoint,
|
|
|
|
|
error: error?.message || error,
|
|
|
|
|
errorObj: error,
|
2025-10-15 15:05:20 +09:00
|
|
|
config,
|
2025-10-01 12:06:24 +09:00
|
|
|
});
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 대시보드 타입 정의
|
|
|
|
|
export interface Dashboard {
|
|
|
|
|
id: string;
|
|
|
|
|
title: string;
|
|
|
|
|
description?: string;
|
|
|
|
|
thumbnailUrl?: string;
|
|
|
|
|
isPublic: boolean;
|
|
|
|
|
createdBy: string;
|
2025-12-01 11:07:35 +09:00
|
|
|
createdByName?: string;
|
2025-10-01 12:06:24 +09:00
|
|
|
createdAt: string;
|
|
|
|
|
updatedAt: string;
|
|
|
|
|
tags?: string[];
|
|
|
|
|
category?: string;
|
|
|
|
|
viewCount: number;
|
|
|
|
|
elementsCount?: number;
|
|
|
|
|
creatorName?: string;
|
2025-12-01 11:07:35 +09:00
|
|
|
companyCode?: string;
|
2025-10-01 12:06:24 +09:00
|
|
|
elements?: DashboardElement[];
|
2025-10-16 10:27:43 +09:00
|
|
|
settings?: {
|
|
|
|
|
resolution?: string;
|
|
|
|
|
backgroundColor?: string;
|
|
|
|
|
};
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface CreateDashboardRequest {
|
|
|
|
|
title: string;
|
|
|
|
|
description?: string;
|
|
|
|
|
isPublic?: boolean;
|
|
|
|
|
elements: DashboardElement[];
|
|
|
|
|
tags?: string[];
|
|
|
|
|
category?: string;
|
2025-10-16 10:27:43 +09:00
|
|
|
settings?: {
|
|
|
|
|
resolution?: string;
|
|
|
|
|
backgroundColor?: string;
|
|
|
|
|
};
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface DashboardListQuery {
|
|
|
|
|
page?: number;
|
|
|
|
|
limit?: number;
|
|
|
|
|
search?: string;
|
|
|
|
|
category?: string;
|
|
|
|
|
isPublic?: boolean;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// 대시보드 API 함수들
|
|
|
|
|
export const dashboardApi = {
|
|
|
|
|
/**
|
|
|
|
|
* 대시보드 생성
|
|
|
|
|
*/
|
|
|
|
|
async createDashboard(data: CreateDashboardRequest): Promise<Dashboard> {
|
2025-11-21 10:29:47 +09:00
|
|
|
console.log("🔍 [API createDashboard] 요청 데이터:", {
|
|
|
|
|
data,
|
|
|
|
|
settings: data.settings,
|
|
|
|
|
stringified: JSON.stringify(data),
|
|
|
|
|
});
|
|
|
|
|
|
2025-10-15 15:05:20 +09:00
|
|
|
const result = await apiRequest<Dashboard>("/dashboards", {
|
|
|
|
|
method: "POST",
|
2025-10-01 12:06:24 +09:00
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
});
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success || !result.data) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 생성에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-11-21 10:29:47 +09:00
|
|
|
console.log("🔍 [API createDashboard] 응답 데이터:", {
|
|
|
|
|
settings: result.data.settings,
|
|
|
|
|
});
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result.data;
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 대시보드 목록 조회
|
|
|
|
|
*/
|
|
|
|
|
async getDashboards(query: DashboardListQuery = {}) {
|
|
|
|
|
const params = new URLSearchParams();
|
2025-10-15 15:05:20 +09:00
|
|
|
|
|
|
|
|
if (query.page) params.append("page", query.page.toString());
|
|
|
|
|
if (query.limit) params.append("limit", query.limit.toString());
|
|
|
|
|
if (query.search) params.append("search", query.search);
|
|
|
|
|
if (query.category) params.append("category", query.category);
|
|
|
|
|
if (typeof query.isPublic === "boolean") params.append("isPublic", query.isPublic.toString());
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const queryString = params.toString();
|
2025-10-15 15:05:20 +09:00
|
|
|
const endpoint = `/dashboards${queryString ? `?${queryString}` : ""}`;
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const result = await apiRequest<Dashboard[]>(endpoint);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 목록 조회에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return {
|
|
|
|
|
dashboards: result.data || [],
|
2025-10-15 15:05:20 +09:00
|
|
|
pagination: result.pagination,
|
2025-10-01 12:06:24 +09:00
|
|
|
};
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 내 대시보드 목록 조회
|
|
|
|
|
*/
|
|
|
|
|
async getMyDashboards(query: DashboardListQuery = {}) {
|
|
|
|
|
const params = new URLSearchParams();
|
2025-10-15 15:05:20 +09:00
|
|
|
|
|
|
|
|
if (query.page) params.append("page", query.page.toString());
|
|
|
|
|
if (query.limit) params.append("limit", query.limit.toString());
|
|
|
|
|
if (query.search) params.append("search", query.search);
|
|
|
|
|
if (query.category) params.append("category", query.category);
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const queryString = params.toString();
|
2025-10-15 15:05:20 +09:00
|
|
|
const endpoint = `/dashboards/my${queryString ? `?${queryString}` : ""}`;
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const result = await apiRequest<Dashboard[]>(endpoint);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "내 대시보드 목록 조회에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return {
|
|
|
|
|
dashboards: result.data || [],
|
2025-10-15 15:05:20 +09:00
|
|
|
pagination: result.pagination,
|
2025-10-01 12:06:24 +09:00
|
|
|
};
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 대시보드 상세 조회
|
|
|
|
|
*/
|
|
|
|
|
async getDashboard(id: string): Promise<Dashboard> {
|
|
|
|
|
const result = await apiRequest<Dashboard>(`/dashboards/${id}`);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success || !result.data) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 조회에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result.data;
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 공개 대시보드 조회 (인증 불필요)
|
|
|
|
|
*/
|
|
|
|
|
async getPublicDashboard(id: string): Promise<Dashboard> {
|
|
|
|
|
const result = await apiRequest<Dashboard>(`/dashboards/public/${id}`);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success || !result.data) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 조회에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result.data;
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 대시보드 수정
|
|
|
|
|
*/
|
|
|
|
|
async updateDashboard(id: string, data: Partial<CreateDashboardRequest>): Promise<Dashboard> {
|
2025-11-21 10:29:47 +09:00
|
|
|
console.log("🔍 [API updateDashboard] 요청 데이터:", {
|
|
|
|
|
id,
|
|
|
|
|
data,
|
|
|
|
|
settings: data.settings,
|
|
|
|
|
stringified: JSON.stringify(data),
|
|
|
|
|
});
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const result = await apiRequest<Dashboard>(`/dashboards/${id}`, {
|
2025-10-15 15:05:20 +09:00
|
|
|
method: "PUT",
|
2025-10-01 12:06:24 +09:00
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
});
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success || !result.data) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 수정에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-11-21 10:29:47 +09:00
|
|
|
console.log("🔍 [API updateDashboard] 응답 데이터:", {
|
|
|
|
|
settings: result.data.settings,
|
|
|
|
|
});
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result.data;
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 대시보드 삭제
|
|
|
|
|
*/
|
|
|
|
|
async deleteDashboard(id: string): Promise<void> {
|
|
|
|
|
const result = await apiRequest(`/dashboards/${id}`, {
|
2025-10-15 15:05:20 +09:00
|
|
|
method: "DELETE",
|
2025-10-01 12:06:24 +09:00
|
|
|
});
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "대시보드 삭제에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
|
|
|
|
},
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
/**
|
|
|
|
|
* 공개 대시보드 목록 조회 (인증 불필요)
|
|
|
|
|
*/
|
|
|
|
|
async getPublicDashboards(query: DashboardListQuery = {}) {
|
|
|
|
|
const params = new URLSearchParams();
|
2025-10-15 15:05:20 +09:00
|
|
|
|
|
|
|
|
if (query.page) params.append("page", query.page.toString());
|
|
|
|
|
if (query.limit) params.append("limit", query.limit.toString());
|
|
|
|
|
if (query.search) params.append("search", query.search);
|
|
|
|
|
if (query.category) params.append("category", query.category);
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const queryString = params.toString();
|
2025-10-15 15:05:20 +09:00
|
|
|
const endpoint = `/dashboards/public${queryString ? `?${queryString}` : ""}`;
|
|
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
const result = await apiRequest<Dashboard[]>(endpoint);
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "공개 대시보드 목록 조회에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return {
|
|
|
|
|
dashboards: result.data || [],
|
2025-10-15 15:05:20 +09:00
|
|
|
pagination: result.pagination,
|
2025-10-01 12:06:24 +09:00
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 쿼리 실행 (차트 데이터 조회)
|
|
|
|
|
*/
|
|
|
|
|
async executeQuery(query: string): Promise<{ columns: string[]; rows: any[]; rowCount: number }> {
|
2025-10-15 15:05:20 +09:00
|
|
|
const result = await apiRequest<{ columns: string[]; rows: any[]; rowCount: number }>("/dashboards/execute-query", {
|
|
|
|
|
method: "POST",
|
2025-10-01 12:06:24 +09:00
|
|
|
body: JSON.stringify({ query }),
|
|
|
|
|
});
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
if (!result.success || !result.data) {
|
2025-10-15 15:05:20 +09:00
|
|
|
throw new Error(result.message || "쿼리 실행에 실패했습니다.");
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
2025-10-01 12:06:24 +09:00
|
|
|
return result.data;
|
2025-10-15 15:05:20 +09:00
|
|
|
},
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* 테이블 스키마 조회 (날짜 컬럼 감지용)
|
|
|
|
|
*/
|
|
|
|
|
async getTableSchema(tableName: string): Promise<{
|
|
|
|
|
tableName: string;
|
|
|
|
|
columns: Array<{ name: string; type: string; udtName: string }>;
|
|
|
|
|
dateColumns: string[];
|
|
|
|
|
}> {
|
|
|
|
|
const result = await apiRequest<{
|
|
|
|
|
tableName: string;
|
|
|
|
|
columns: Array<{ name: string; type: string; udtName: string }>;
|
|
|
|
|
dateColumns: string[];
|
|
|
|
|
}>("/dashboards/table-schema", {
|
|
|
|
|
method: "POST",
|
|
|
|
|
body: JSON.stringify({ tableName }),
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!result.success || !result.data) {
|
|
|
|
|
throw new Error(result.message || "테이블 스키마 조회에 실패했습니다.");
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return result.data;
|
|
|
|
|
},
|
2025-10-01 12:06:24 +09:00
|
|
|
};
|
|
|
|
|
|
|
|
|
|
// 에러 처리 유틸리티
|
|
|
|
|
export function handleApiError(error: any): string {
|
|
|
|
|
if (error.message) {
|
|
|
|
|
return error.message;
|
|
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
|
|
|
|
if (typeof error === "string") {
|
2025-10-01 12:06:24 +09:00
|
|
|
return error;
|
|
|
|
|
}
|
2025-10-15 15:05:20 +09:00
|
|
|
|
|
|
|
|
return "알 수 없는 오류가 발생했습니다.";
|
2025-10-01 12:06:24 +09:00
|
|
|
}
|