apiClient 변경 및 기존 customFetch 함수 제거

frontend/src/api/ApiClient.ts

@@ -1,4 +1,5 @@
 import { ApiError } from './Error/ApiError';
+import { getErrorMessage } from './Error/getErrorMessage';
 import { HTTP_STATUS } from './Error/statusCode';
 
 type HttpMethod =
@@ -27,7 +28,7 @@ interface RequestParams {
   [key: string]: string | number | boolean;
 }
 
-class ApiClient {
+export class ApiClient {
   baseUrl: string;
   headers: HeadersInit;
   credentials: RequestCredentials;
@@ -84,24 +85,13 @@ class ApiClient {
   }
 
   private async handleError(response: Response) {
-    const errorBody = await response.json();
+    const { errorCode, instance, detail } = await response.json();
 
     if (response.status === HTTP_STATUS.UNAUTHORIZED) {
       localStorage.removeItem('name');
       localStorage.removeItem('memberId');
     }
 
-    // TODO: 에러코드에 따른 메시지 반환 함수 만들기
-    throw new ApiError('에러메시지입니다.', response.status, errorBody.errorCode, errorBody.detail);
+    throw new ApiError(getErrorMessage(errorCode, instance), response.status, errorCode, detail);
   }
 }
-
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-const httpHeader = {
-  'Content-Type': 'application/json',
-};
-
-const httpCredentials = 'include';
-
-export const apiClient = new ApiClient(API_URL, httpHeader, httpCredentials);

frontend/src/api/Error/getErrorMessage.ts

@@ -0,0 +1,10 @@
+import { END_POINTS } from '@/routes';
+
+// TODO: errorCode magic number
+export const getErrorMessage = (errorCode: number, instance: string) => {
+  if (errorCode === 1202 && instance === END_POINTS.CHECK_NAME) {
+    return '중복된 아이디입니다';
+  }
+
+  return 'APIError 입니다';
+};

frontend/src/api/authentication.ts

@@ -1,72 +1,22 @@
 import { END_POINTS } from '@/routes';
 import type { LoginRequest, SignupRequest } from '@/types';
-import { MemberInfo } from '@/types';
 
-import { apiClient } from './ApiClient';
-import { customFetch } from './customFetch';
+import { apiClient } from './config';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
+export const postSignup = async (signupInfo: SignupRequest) => await apiClient.post(END_POINTS.SIGNUP, signupInfo);
 
-export const SIGNUP_API_URL = `${API_URL}${END_POINTS.SIGNUP}`;
-export const LOGIN_API_URL = `${API_URL}${END_POINTS.LOGIN}`;
-export const LOGOUT_API_URL = `${API_URL}${END_POINTS.LOGOUT}`;
-export const LOGIN_STATE_API_URL = `${API_URL}${END_POINTS.LOGIN_CHECK}`;
-export const CHECK_NAME_API_URL = `${API_URL}${END_POINTS.CHECK_NAME}`;
+export const postLogin = async (loginInfo: LoginRequest) => {
+  const response = await apiClient.post(END_POINTS.LOGIN, loginInfo);
 
-export const postSignup = async (signupInfo: SignupRequest) =>
-  await customFetch({
-    method: 'POST',
-    url: `${SIGNUP_API_URL}`,
-    body: JSON.stringify(signupInfo),
-  });
-
-export const postLogin = async (loginInfo: LoginRequest): Promise<MemberInfo> => {
-  const response = await customFetch<MemberInfo>({
-    method: 'POST',
-    url: `${LOGIN_API_URL}`,
-    body: JSON.stringify(loginInfo),
-  });
-
-  if ('memberId' in response) {
-    return response;
-  }
-
-  if (response.status >= 400) {
-    return { memberId: undefined, name: undefined };
-  }
-
-  throw new Error(response.detail);
+  return await response.json();
 };
 
-export const postLogout = async () => {
-  const response = await customFetch<unknown>({
-    method: 'POST',
-    url: `${LOGOUT_API_URL}`,
-  });
-
-  return response;
-};
+export const postLogout = async () => await apiClient.post(END_POINTS.LOGOUT, {});
 
 export const getLoginState = async () => apiClient.get(END_POINTS.LOGIN_CHECK);
 
 export const checkName = async (name: string) => {
   const params = new URLSearchParams({ name });
-  const url = `${CHECK_NAME_API_URL}?${params}`;
-
-  const response = await fetch(url, {
-    headers: {
-      'Content-Type': 'application/json',
-    },
-    credentials: 'include',
-  });
-
-  if (response.status === 409) {
-    throw new Error('중복된 아이디입니다.');
-  }
-
-  if (!response.ok) {
-    throw new Error('서버 에러가 발생했습니다.');
-  }
 
-  return {};
+  await apiClient.get(`${END_POINTS.CHECK_NAME}?${params.toString()}`);
 };

frontend/src/api/categories.ts

@@ -1,58 +1,25 @@
-import { HttpResponse } from 'msw';
-
 import { END_POINTS } from '@/routes';
-import type {
-  CategoryListResponse,
-  CategoryUploadRequest,
-  CategoryEditRequest,
-  CategoryDeleteRequest,
-  CustomError,
-  Category,
-} from '@/types';
-
-import { customFetch } from './customFetch';
+import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest } from '@/types';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const CATEGORY_API_URL = `${API_URL}${END_POINTS.CATEGORIES}`;
+import { apiClient } from './config';
 
 export const getCategoryList = async (memberId: number) => {
-  const url = `${CATEGORY_API_URL}?memberId=${memberId}`;
-
-  const response = await customFetch<CategoryListResponse>({
-    url,
+  const queryParams = new URLSearchParams({
+    memberId: memberId.toString(),
   });
+  const response = await apiClient.get(`${END_POINTS.CATEGORIES}?${queryParams.toString()}`);
 
-  if ('categories' in response) {
-    return response;
-  }
-
-  throw new Error(response.detail);
+  return await response.json();
 };
 
-export const postCategory = async (newCategory: CategoryUploadRequest): Promise<Category | CustomError> =>
-  await customFetch({
-    method: 'POST',
-    url: `${CATEGORY_API_URL}`,
-    body: JSON.stringify(newCategory),
-  });
+export const postCategory = async (newCategory: CategoryUploadRequest) => {
+  const response = await apiClient.post(`${END_POINTS.CATEGORIES}`, newCategory);
 
-export const editCategory = async ({ id, name }: CategoryEditRequest) =>
-  await customFetch({
-    method: 'PUT',
-    url: `${CATEGORY_API_URL}/${id}`,
-    body: JSON.stringify({ name }),
-  });
-
-export const deleteCategory = async ({ id }: CategoryDeleteRequest) => {
-  const response = await customFetch<HttpResponse>({
-    method: 'DELETE',
-    url: `${CATEGORY_API_URL}/${id}`,
-  });
+  return await response.json();
+};
 
-  if (typeof response === 'object' && response !== null && 'status' in response) {
-    throw response as CustomError;
-  }
+export const editCategory = async ({ id, name }: CategoryEditRequest) =>
+  await apiClient.put(`${END_POINTS.CATEGORIES}/${id}`, { name });
 
-  return response;
-};
+export const deleteCategory = async ({ id }: CategoryDeleteRequest) =>
+  await apiClient.delete(`${END_POINTS.CATEGORIES}/${id}`);

frontend/src/api/config.ts

@@ -0,0 +1,10 @@
+import { ApiClient } from './ApiClient';
+
+export const API_URL = process.env.REACT_APP_API_URL ?? 'https://default-url.com';
+
+const httpHeader = {
+  'Content-Type': 'application/json',
+};
+const httpCredentials = 'include';
+
+export const apiClient = new ApiClient(API_URL, httpHeader, httpCredentials);

frontend/src/api/index.ts

@@ -1,9 +1,7 @@
-export { CATEGORY_API_URL, getCategoryList, postCategory, deleteCategory } from './categories';
-export { TAG_API_URL, getTagList } from './tags';
-export { customFetch } from './customFetch';
+export { API_URL } from './config';
 export { QUERY_KEY } from './queryKeys';
+
 export {
-  TEMPLATE_API_URL,
   PAGE_SIZE,
   SORTING_OPTIONS,
   DEFAULT_SORTING_OPTION,
@@ -14,17 +12,8 @@ export {
   editTemplate,
   deleteTemplate,
 } from './templates';
-export {
-  CHECK_NAME_API_URL,
-  LOGIN_API_URL,
-  LOGIN_STATE_API_URL,
-  SIGNUP_API_URL,
-  LOGOUT_API_URL,
-  postSignup,
-  postLogin,
-  postLogout,
-  getLoginState,
-  checkName,
-} from './authentication';
-export { LIKE_API_URL, postLike, deleteLike } from './like';
+export { postSignup, postLogin, postLogout, getLoginState, checkName } from './authentication';
+export { getCategoryList, postCategory, deleteCategory } from './categories';
+export { getTagList } from './tags';
+export { postLike, deleteLike } from './like';
 export { getMemberName } from './members';

frontend/src/api/like.ts

@@ -1,28 +1,7 @@
-import { HttpResponse } from 'msw';
-
 import { END_POINTS } from '@/routes';
-import { LikeDeleteRequest, LikePostRequest } from '@/types';
-
-import { customFetch } from './customFetch';
-
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const LIKE_API_URL = `${API_URL}${END_POINTS.LIKES}`;
-
-export const postLike = async ({ templateId }: LikePostRequest) => {
-  const response = await customFetch<HttpResponse>({
-    method: 'POST',
-    url: `${LIKE_API_URL}/${templateId}`,
-  });
 
-  return response;
-};
+import { apiClient } from './config';
 
-export const deleteLike = async ({ templateId }: LikeDeleteRequest) => {
-  const response = await customFetch<HttpResponse>({
-    method: 'DELETE',
-    url: `${LIKE_API_URL}/${templateId}`,
-  });
+export const postLike = async (templateId: number) => await apiClient.post(`${END_POINTS.LIKES}/${templateId}`, {});
 
-  return response;
-};
+export const deleteLike = async (templateId: number) => await apiClient.delete(`${END_POINTS.LIKES}/${templateId}`);

frontend/src/api/members.ts

@@ -1,22 +1,9 @@
 import { END_POINTS } from '@/routes';
-import { GetMemberNameResponse } from '@/types';
 
-import { customFetch } from './customFetch';
-
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
+import { apiClient } from './config';
 
 export const getMemberName = async (memberId: number) => {
-  const url = `${MEMBER_API_URL}/${memberId}/name`;
-
-  const response = await customFetch<GetMemberNameResponse>({
-    url,
-  });
-
-  if ('name' in response) {
-    return response;
-  }
+  const response = await apiClient.get(`${END_POINTS.MEMBERS}/${memberId}/name`);
 
-  throw new Error(response.detail);
+  return await response.json();
 };