460 lines
13 KiB
TypeScript
460 lines
13 KiB
TypeScript
/**
|
|
* 📄 API Utility
|
|
* API 호출 유틸리티 파일
|
|
*
|
|
* - 다양한 HTTP 메소드의 API 호출 함수 (GET, POST, PUT, DELETE)
|
|
* - 쿠키 기반 인증 토큰 관리 및 사용자 조회
|
|
* - 특정 서비스 (DC, CMS, GeoServer) 호출 지원
|
|
* - Axios 및 Fetch 기반 HTTP 요청 처리
|
|
* - 타입 안전성 보장을 위한 인터페이스 활용
|
|
* - 에러 핸들링 및 응답 처리 표준화
|
|
*/
|
|
import { useEffect, useState } from "react";
|
|
import axios from 'axios';
|
|
import { AxiosError } from 'axios';
|
|
import { CLAIM_NAME, SITE_ID } from "@/shared/config";
|
|
import { tokenManager } from "@/entities/auth/lib/token-manager";
|
|
import { getRemainingMs } from "@common/auth";
|
|
|
|
const BASE_URL = '/sewerage-service/api';
|
|
const DEFAULT_HEADERS = {
|
|
"X-Site-Id": SITE_ID,
|
|
};
|
|
const LOGIN_PAGE_URL =
|
|
process.env.NEXT_PUBLIC_CM_LOGIN_PAGE_URL || "/auth/login";
|
|
|
|
const withSiteIdHeaders = (headers: HeadersInit = {}) => ({
|
|
...headers,
|
|
...DEFAULT_HEADERS,
|
|
});
|
|
|
|
const resolveApiUrl = (url: string) =>
|
|
url.startsWith('/') ? `${url}` : `${BASE_URL}/${url}`;
|
|
|
|
const buildInvalidJsonResponseError = (url: string, text: string, contentType?: string | null) => {
|
|
const preview = text.trim().slice(0, 200);
|
|
const responseType = contentType ? ` (${contentType})` : "";
|
|
return new Error(
|
|
`JSON 응답이 아닌 데이터를 받았습니다${responseType}: ${url}${preview ? ` - ${preview}` : ""}`,
|
|
);
|
|
};
|
|
const buildRequestError = (
|
|
fallbackMessage: string,
|
|
status?: number,
|
|
body?: unknown,
|
|
) => {
|
|
const bodyMessage =
|
|
typeof body === "object" && body !== null
|
|
? (
|
|
(body as { message?: unknown }).message
|
|
?? (body as { error?: { message?: unknown } }).error?.message
|
|
)
|
|
: undefined;
|
|
const message =
|
|
typeof bodyMessage === "string" && bodyMessage.trim()
|
|
? bodyMessage
|
|
: fallbackMessage;
|
|
const error = new Error(message) as Error & { status?: number; body?: unknown };
|
|
error.status = status;
|
|
error.body = body;
|
|
return error;
|
|
};
|
|
|
|
const handleUnauthorizedResponse = () => {
|
|
if (typeof window === "undefined") return;
|
|
|
|
const accessToken = tokenManager.getToken(CLAIM_NAME);
|
|
const remainingMs = accessToken ? getRemainingMs(accessToken) : null;
|
|
const isExpired = remainingMs === null || remainingMs <= 0;
|
|
|
|
if (!isExpired) return;
|
|
|
|
tokenManager.clearAuthToken();
|
|
|
|
const isLoginPage =
|
|
window.location.pathname === "/auth/login" ||
|
|
window.location.pathname.startsWith("/auth/login/");
|
|
|
|
if (!isLoginPage) {
|
|
window.location.assign(LOGIN_PAGE_URL);
|
|
}
|
|
};
|
|
|
|
export const getData = async (url: string): Promise<any> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.ok) {
|
|
try {
|
|
// 응답이 비어있는지 확인
|
|
const contentLength = res.headers.get('content-length');
|
|
if (contentLength === '0') {
|
|
return null;
|
|
}
|
|
|
|
// 응답 텍스트를 먼저 가져와서 빈 문자열인지 확인
|
|
const text = await res.text();
|
|
if (!text || text.trim() === '') {
|
|
return null;
|
|
}
|
|
|
|
// JSON 파싱 시도
|
|
const data = JSON.parse(text);
|
|
return data.data;
|
|
} catch (error) {
|
|
console.error('JSON parsing error:', error);
|
|
// JSON 파싱에 실패한 경우, 원본 텍스트 또는 null 반환
|
|
throw new Error('Invalid JSON response from server');
|
|
}
|
|
}
|
|
|
|
const text = await res.text().catch(() => "");
|
|
let body: unknown = null;
|
|
if (text.trim()) {
|
|
try {
|
|
body = JSON.parse(text);
|
|
} catch {
|
|
body = text;
|
|
}
|
|
}
|
|
|
|
throw buildRequestError(
|
|
`Failed to fetch data: ${res.status} ${res.statusText}`,
|
|
res.status,
|
|
body,
|
|
);
|
|
};
|
|
|
|
export const postData = async (url: string, data: object): Promise<any> => {
|
|
const options: RequestInit = {
|
|
method: "POST",
|
|
headers: withSiteIdHeaders({
|
|
"Content-Type": "application/json",
|
|
}),
|
|
body: JSON.stringify(data),
|
|
};
|
|
const res = await fetch(`${BASE_URL}/${url}`, options);
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.ok) {
|
|
const resData = await res.json();
|
|
console.log('postData response:', resData);
|
|
return resData.data;
|
|
}
|
|
};
|
|
|
|
export const postRawJson = async (url: string, data: object): Promise<any> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "POST",
|
|
headers: withSiteIdHeaders({
|
|
"Content-Type": "application/json",
|
|
}),
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
const text = await res.text();
|
|
const body = text && text.trim() ? JSON.parse(text) : null;
|
|
if (!res.ok) {
|
|
const message =
|
|
body?.message ??
|
|
`Failed to post data: ${res.status} ${res.statusText}`;
|
|
const error = new Error(message) as Error & { status?: number; body?: any };
|
|
error.status = res.status;
|
|
error.body = body;
|
|
throw error;
|
|
}
|
|
return body;
|
|
};
|
|
|
|
/** 공통 응답 래퍼를 사용하는 JSON PUT 요청을 전송하고 data 필드만 반환한다. */
|
|
export const putData = async (url: string, data: object): Promise<any> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "PUT",
|
|
headers: withSiteIdHeaders({
|
|
"Content-Type": "application/json",
|
|
}),
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
const text = await res.text();
|
|
let body: unknown = null;
|
|
if (text.trim()) {
|
|
try {
|
|
body = JSON.parse(text);
|
|
} catch {
|
|
throw buildInvalidJsonResponseError(url, text, res.headers.get("content-type"));
|
|
}
|
|
}
|
|
|
|
if (!res.ok) {
|
|
throw buildRequestError(
|
|
`Failed to update data: ${res.status} ${res.statusText}`,
|
|
res.status,
|
|
body,
|
|
);
|
|
}
|
|
|
|
if (typeof body === "object" && body !== null && "data" in body) {
|
|
return (body as { data?: unknown }).data ?? null;
|
|
}
|
|
return body;
|
|
};
|
|
|
|
const parseDownloadFileName = (contentDisposition: string | null) => {
|
|
if (!contentDisposition) return undefined;
|
|
|
|
const utf8Match = contentDisposition.match(/filename\*\s*=\s*UTF-8''([^;]+)/i);
|
|
if (utf8Match?.[1]) {
|
|
return decodeURIComponent(utf8Match[1].trim());
|
|
}
|
|
|
|
const plainMatch = contentDisposition.match(/filename\s*=\s*"?([^\";]+)"?/i);
|
|
return plainMatch?.[1]?.trim();
|
|
};
|
|
|
|
export const postBlobData = async (
|
|
url: string,
|
|
data: object,
|
|
): Promise<{ blob: Blob; fileName?: string }> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "POST",
|
|
headers: withSiteIdHeaders({
|
|
"Content-Type": "application/json",
|
|
}),
|
|
body: JSON.stringify(data),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
if (!res.ok) {
|
|
const errorText = await res.text().catch(() => "");
|
|
throw new Error(
|
|
`Failed to fetch blob: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""} (${url})`,
|
|
);
|
|
}
|
|
|
|
return {
|
|
blob: await res.blob(),
|
|
fileName: parseDownloadFileName(res.headers.get("content-disposition")),
|
|
};
|
|
};
|
|
|
|
export const postMutiPart = async (url: string, data: FormData): Promise<any> => {
|
|
try {
|
|
const res = await axios.post(resolveApiUrl(url), data, {
|
|
headers: DEFAULT_HEADERS,
|
|
timeout: 600000, // 10분
|
|
});
|
|
console.log('postMultiPart response:', res);
|
|
return res.data.data;
|
|
} catch (error) {
|
|
if (error instanceof AxiosError) {
|
|
const responseBody = error.response?.data;
|
|
const serverMessage =
|
|
typeof responseBody?.message === 'string' && responseBody.message.trim()
|
|
? responseBody.message.trim()
|
|
: typeof responseBody?.error?.message === 'string' && responseBody.error.message.trim()
|
|
? responseBody.error.message.trim()
|
|
: typeof responseBody === 'string' && responseBody.trim()
|
|
? responseBody.trim()
|
|
: null;
|
|
|
|
const nextError = new Error(
|
|
serverMessage ?? `Multipart request failed: ${error.response?.status ?? 'UNKNOWN'} ${error.response?.statusText ?? ''}`.trim(),
|
|
) as Error & { status?: number; body?: unknown };
|
|
nextError.status = error.response?.status;
|
|
nextError.body = responseBody;
|
|
throw nextError;
|
|
}
|
|
throw error;
|
|
}
|
|
};
|
|
|
|
export const deleteData = async (url: string, data?: object): Promise<any> => {
|
|
const options: RequestInit = {
|
|
method: "DELETE",
|
|
headers: withSiteIdHeaders({
|
|
"Content-Type": "application/json",
|
|
}),
|
|
body: data ? JSON.stringify(data) : undefined,
|
|
};
|
|
const res = await fetch(resolveApiUrl(url), options);
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.status === 204) return true
|
|
return res;
|
|
};
|
|
|
|
// GET 응답을 공통 data wrapper 없이 원문 JSON으로 읽는다. init은 지도 bbox 요청처럼 AbortSignal이 필요한 호출에서 사용한다.
|
|
export const getRawJson = async (url: string, init: RequestInit = {}): Promise<any> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
...init,
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(init.headers),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
if (!res.ok) {
|
|
const errorText = await res.text().catch(() => "");
|
|
throw new Error(
|
|
`Failed to fetch data: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""}`,
|
|
);
|
|
}
|
|
|
|
const contentLength = res.headers.get('content-length');
|
|
if (contentLength === '0') {
|
|
return null;
|
|
}
|
|
|
|
const text = await res.text();
|
|
if (!text || text.trim() === '') {
|
|
return null;
|
|
}
|
|
|
|
const trimmed = text.trim();
|
|
if (trimmed.startsWith("<")) {
|
|
throw buildInvalidJsonResponseError(url, text, res.headers.get("content-type"));
|
|
}
|
|
|
|
try {
|
|
return JSON.parse(text);
|
|
} catch {
|
|
throw buildInvalidJsonResponseError(url, text, res.headers.get("content-type"));
|
|
}
|
|
};
|
|
|
|
export const getBlobData = async (url: string): Promise<Blob> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
if (!res.ok) {
|
|
const errorText = await res.text().catch(() => "");
|
|
throw new Error(
|
|
`Failed to fetch blob: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""} (${url})`,
|
|
);
|
|
}
|
|
|
|
return res.blob();
|
|
};
|
|
|
|
export const getBlobDataWithHeaders = async (
|
|
url: string,
|
|
): Promise<{ blob: Blob; fileName?: string; headers: Headers }> => {
|
|
const res = await fetch(resolveApiUrl(url), {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
|
|
if (!res.ok) {
|
|
const errorText = await res.text().catch(() => "");
|
|
throw new Error(
|
|
`Failed to fetch blob: ${res.status} ${res.statusText}${errorText ? ` - ${errorText.slice(0, 200)}` : ""} (${url})`,
|
|
);
|
|
}
|
|
|
|
return {
|
|
blob: await res.blob(),
|
|
fileName: parseDownloadFileName(res.headers.get("content-disposition")),
|
|
headers: res.headers,
|
|
};
|
|
};
|
|
|
|
// DC API 호출
|
|
export const getDcData = async (url: string, resType: string = "json"): Promise<any> => {
|
|
const res = await fetch('/dc-service' + url, {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.ok) {
|
|
let data;
|
|
if (resType === "json") data = await res.json();
|
|
else if (resType === "blob") data = await res.blob();
|
|
|
|
return data;
|
|
}
|
|
throw new Error('Failed to fetch data');
|
|
};
|
|
|
|
// CMS API 호출
|
|
export const getCmsData = async (url: string, data?: object): Promise<any> => {
|
|
const res = await fetch('/cms-service' + url, {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
return data;
|
|
}
|
|
throw new Error('Failed to fetch data');
|
|
};
|
|
|
|
// GeoServer API 호출
|
|
export const getGeoData = async (url: string, data?: object): Promise<any> => {
|
|
const res = await fetch('/geoserver' + url, {
|
|
method: "GET",
|
|
headers: withSiteIdHeaders(),
|
|
});
|
|
if (res.status === 401) {
|
|
handleUnauthorizedResponse();
|
|
}
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
return data;
|
|
}
|
|
throw new Error('Failed to fetch data');
|
|
};
|
|
|
|
export function getCookie(name: string) {
|
|
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
|
|
if (match && match[2]) {
|
|
return decodeURIComponent(match[2]);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
export const useCookieAuth = () => {
|
|
const [data, setData] = useState("");
|
|
|
|
useEffect(() => {
|
|
const fetch = async () => {
|
|
const result = getCookie("Authorization");
|
|
if (result) {
|
|
setData(result);
|
|
}
|
|
};
|
|
fetch();
|
|
console.log("useCookieAuth 호출");
|
|
}, []);
|
|
|
|
return data;
|
|
};
|