From e5af0d579fba08dc4da1204fde4c71d0436c3e16 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 12:09:42 +0900
Subject: [PATCH 01/18] =?UTF-8?q?refactor(ApiClient):=20apiClient=20?=
 =?UTF-8?q?=EC=9D=B8=EC=8A=A4=ED=84=B4=EC=8A=A4=EB=A5=BC=20config=20?=
 =?UTF-8?q?=ED=8C=8C=EC=9D=BC=EC=97=90=EC=84=9C=20=EC=84=A0=EC=96=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/ApiClient.ts      | 12 +-----------
 frontend/src/api/authentication.ts |  2 +-
 frontend/src/api/config.ts         | 10 ++++++++++
 frontend/src/api/templates.ts      |  2 +-
 4 files changed, 13 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/api/config.ts

diff --git a/frontend/src/api/ApiClient.ts b/frontend/src/api/ApiClient.ts
index 5a15edfdf..44c8bd7d0 100644
--- a/frontend/src/api/ApiClient.ts
+++ b/frontend/src/api/ApiClient.ts
@@ -27,7 +27,7 @@ interface RequestParams {
   [key: string]: string | number | boolean;
 }
 
-class ApiClient {
+export class ApiClient {
   baseUrl: string;
   headers: HeadersInit;
   credentials: RequestCredentials;
@@ -95,13 +95,3 @@ class ApiClient {
     throw new ApiError('에러메시지입니다.', response.status, errorBody.errorCode, errorBody.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);
diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
index a2397fac4..116fd4129 100644
--- a/frontend/src/api/authentication.ts
+++ b/frontend/src/api/authentication.ts
@@ -2,7 +2,7 @@ import { END_POINTS } from '@/routes';
 import type { LoginRequest, SignupRequest } from '@/types';
 import { MemberInfo } from '@/types';
 
-import { apiClient } from './ApiClient';
+import { apiClient } from './config';
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
diff --git a/frontend/src/api/config.ts b/frontend/src/api/config.ts
new file mode 100644
index 000000000..55cfb23db
--- /dev/null
+++ b/frontend/src/api/config.ts
@@ -0,0 +1,10 @@
+import { ApiClient } from './ApiClient';
+
+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);
diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index a9c007fa4..6f769b45f 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -9,7 +9,7 @@ import type {
 } from '@/types';
 import { SortingOption } from '@/types';
 
-import { apiClient } from './ApiClient';
+import { apiClient } from './config';
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';

From 61b5bd37471874bf32b6ce34e4d157dae464317b Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 12:31:00 +0900
Subject: [PATCH 02/18] =?UTF-8?q?refactor(categories):=20=EC=B9=B4?=
 =?UTF-8?q?=ED=85=8C=EA=B3=A0=EB=A6=AC=20get,=20post,=20put=20-=20apiClien?=
 =?UTF-8?q?t=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/categories.ts | 40 ++++++++++------------------------
 1 file changed, 12 insertions(+), 28 deletions(-)

diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts
index 8294f3876..2fac0237d 100644
--- a/frontend/src/api/categories.ts
+++ b/frontend/src/api/categories.ts
@@ -1,15 +1,9 @@
 import { HttpResponse } from 'msw';
 
 import { END_POINTS } from '@/routes';
-import type {
-  CategoryListResponse,
-  CategoryUploadRequest,
-  CategoryEditRequest,
-  CategoryDeleteRequest,
-  CustomError,
-  Category,
-} from '@/types';
+import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest, CustomError } from '@/types';
 
+import { apiClient } from './config';
 import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
@@ -17,32 +11,22 @@ const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 export const CATEGORY_API_URL = `${API_URL}${END_POINTS.CATEGORIES}`;
 
 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);
+
+  return await response.json();
+};
 
 export const editCategory = async ({ id, name }: CategoryEditRequest) =>
-  await customFetch({
-    method: 'PUT',
-    url: `${CATEGORY_API_URL}/${id}`,
-    body: JSON.stringify({ name }),
-  });
+  await apiClient.put(`${END_POINTS.CATEGORIES}/${id}`, { name });
 
 export const deleteCategory = async ({ id }: CategoryDeleteRequest) => {
   const response = await customFetch<HttpResponse>({

From 8192cc6f29eabff4ef1882ace7fb713954f5d960 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 12:39:19 +0900
Subject: [PATCH 03/18] =?UTF-8?q?refactor(api):=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20delete=20-=20apiClient=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/categories.ts | 19 +++----------------
 1 file changed, 3 insertions(+), 16 deletions(-)

diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts
index 2fac0237d..daed6783e 100644
--- a/frontend/src/api/categories.ts
+++ b/frontend/src/api/categories.ts
@@ -1,10 +1,7 @@
-import { HttpResponse } from 'msw';
-
 import { END_POINTS } from '@/routes';
-import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest, CustomError } from '@/types';
+import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest } from '@/types';
 
 import { apiClient } from './config';
-import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
@@ -28,15 +25,5 @@ export const postCategory = async (newCategory: CategoryUploadRequest) => {
 export const editCategory = async ({ id, name }: CategoryEditRequest) =>
   await apiClient.put(`${END_POINTS.CATEGORIES}/${id}`, { name });
 
-export const deleteCategory = async ({ id }: CategoryDeleteRequest) => {
-  const response = await customFetch<HttpResponse>({
-    method: 'DELETE',
-    url: `${CATEGORY_API_URL}/${id}`,
-  });
-
-  if (typeof response === 'object' && response !== null && 'status' in response) {
-    throw response as CustomError;
-  }
-
-  return response;
-};
+export const deleteCategory = async ({ id }: CategoryDeleteRequest) =>
+  await apiClient.delete(`${END_POINTS.CATEGORIES}/${id}`);

From bd20e68064995ea5c4d6f3e98f29e82beaf65b66 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 12:40:18 +0900
Subject: [PATCH 04/18] =?UTF-8?q?refactor(mocks):=20handlers=20-=20?=
 =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20url=EC=9D=84=20config?=
 =?UTF-8?q?=EC=9D=98=20API=5FURL=EA=B3=BC=20END=5FPOINTS=EB=A5=BC=20?=
 =?UTF-8?q?=ED=99=9C=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/categories.ts |  4 ----
 frontend/src/api/config.ts     |  2 +-
 frontend/src/api/index.ts      |  2 +-
 frontend/src/mocks/handlers.ts | 11 ++++++-----
 4 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/frontend/src/api/categories.ts b/frontend/src/api/categories.ts
index daed6783e..2da55bdfe 100644
--- a/frontend/src/api/categories.ts
+++ b/frontend/src/api/categories.ts
@@ -3,10 +3,6 @@ import type { CategoryUploadRequest, CategoryEditRequest, CategoryDeleteRequest
 
 import { apiClient } from './config';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const CATEGORY_API_URL = `${API_URL}${END_POINTS.CATEGORIES}`;
-
 export const getCategoryList = async (memberId: number) => {
   const queryParams = new URLSearchParams({
     memberId: memberId.toString(),
diff --git a/frontend/src/api/config.ts b/frontend/src/api/config.ts
index 55cfb23db..b4aab90e7 100644
--- a/frontend/src/api/config.ts
+++ b/frontend/src/api/config.ts
@@ -1,6 +1,6 @@
 import { ApiClient } from './ApiClient';
 
-const API_URL = process.env.REACT_APP_API_URL ?? 'https://default-url.com';
+export const API_URL = process.env.REACT_APP_API_URL ?? 'https://default-url.com';
 
 const httpHeader = {
   'Content-Type': 'application/json',
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index cc320e8e4..5cfd49b98 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,4 +1,4 @@
-export { CATEGORY_API_URL, getCategoryList, postCategory, deleteCategory } from './categories';
+export { getCategoryList, postCategory, deleteCategory } from './categories';
 export { TAG_API_URL, getTagList } from './tags';
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 57e62978e..e9cb0deb8 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,7 +1,6 @@
 import { HttpResponse, http } from 'msw';
 
 import {
-  CATEGORY_API_URL,
   TEMPLATE_API_URL,
   CHECK_NAME_API_URL,
   LOGIN_API_URL,
@@ -11,6 +10,8 @@ import {
   TAG_API_URL,
   LIKE_API_URL,
 } from '@/api';
+import { API_URL } from '@/api/config';
+import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
 
 import mockCategoryList from './categoryList.json';
@@ -146,8 +147,8 @@ const authenticationHandler = [
 ];
 
 const categoryHandlers = [
-  http.get(`${CATEGORY_API_URL}`, () => HttpResponse.json(mockCategoryList)),
-  http.post(`${CATEGORY_API_URL}`, async (req) => {
+  http.get(`${API_URL}${END_POINTS.CATEGORIES}`, () => HttpResponse.json(mockCategoryList)),
+  http.post(`${API_URL}${END_POINTS.CATEGORIES}`, async (req) => {
     const newCategory = await req.request.json();
 
     if (typeof newCategory === 'object' && newCategory !== null) {
@@ -161,7 +162,7 @@ const categoryHandlers = [
 
     return HttpResponse.json({ status: 400, message: 'Invalid category data' });
   }),
-  http.put(`${CATEGORY_API_URL}/:id`, async (req) => {
+  http.put(`${API_URL}${END_POINTS.CATEGORIES}/:id`, async (req) => {
     const { id } = req.params;
     const updatedCategory = await req.request.json();
     const categoryIndex = mockCategoryList.categories.findIndex((cat) => cat.id.toString() === id);
@@ -174,7 +175,7 @@ const categoryHandlers = [
       return HttpResponse.json({ status: 404, message: 'Category not found or invalid data' });
     }
   }),
-  http.delete(`${CATEGORY_API_URL}/:id`, (req) => {
+  http.delete(`${API_URL}${END_POINTS.CATEGORIES}/:id`, (req) => {
     const { id } = req.params;
     const categoryIndex = mockCategoryList.categories.findIndex((cat) => cat.id.toString() === id);
 

From 182341a75fad9270794d4a5e9873fd6a9e69545a Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 12:49:01 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat(mocks):=20handlers=20-=20member=20na?=
 =?UTF-8?q?me=20GET=EC=97=90=20=EB=8C=80=ED=95=9C=20=ED=95=B8=EB=93=A4?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/mocks/handlers.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index e9cb0deb8..7ae76afe7 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -11,6 +11,7 @@ import {
   LIKE_API_URL,
 } from '@/api';
 import { API_URL } from '@/api/config';
+import { MEMBER_API_URL } from '@/api/members';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
 
@@ -241,10 +242,13 @@ const likeHandlers = [
   }),
 ];
 
+const memberHandlers = [http.get(`${MEMBER_API_URL}/:id/name`, () => HttpResponse.json({ name: 'll' }))];
+
 export const handlers = [
   ...tagHandlers,
   ...templateHandlers,
   ...categoryHandlers,
   ...authenticationHandler,
   ...likeHandlers,
+  ...memberHandlers,
 ];

From 433ae91bc6a3154d4f525def1b784b039ac444e4 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 13:50:49 +0900
Subject: [PATCH 06/18] =?UTF-8?q?refactor(api):=20members=20-=20apiClient?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

GetMemberNameResponse 타입 제거, Error 로직 책임 분리
---
 frontend/src/api/members.ts | 15 +++------------
 1 file changed, 3 insertions(+), 12 deletions(-)

diff --git a/frontend/src/api/members.ts b/frontend/src/api/members.ts
index 8330e4e19..4662f739a 100644
--- a/frontend/src/api/members.ts
+++ b/frontend/src/api/members.ts
@@ -1,22 +1,13 @@
 import { END_POINTS } from '@/routes';
-import { GetMemberNameResponse } from '@/types';
 
-import { customFetch } from './customFetch';
+import { apiClient } from './config';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
 export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
 
 export const getMemberName = async (memberId: number) => {
-  const url = `${MEMBER_API_URL}/${memberId}/name`;
+  const response = await apiClient.get(`${END_POINTS.MEMBERS}/${memberId}/name`);
 
-  const response = await customFetch<GetMemberNameResponse>({
-    url,
-  });
-
-  if ('name' in response) {
-    return response;
-  }
-
-  throw new Error(response.detail);
+  return await response.json();
 };

From a89d25554866e3710df52397b84c88f766617813 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 13:53:38 +0900
Subject: [PATCH 07/18] =?UTF-8?q?refactor(mocks):=20handlers=20-=20MEMBER?=
 =?UTF-8?q?=5FAPI=5FURL=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/members.ts    | 4 ----
 frontend/src/mocks/handlers.ts | 3 +--
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/frontend/src/api/members.ts b/frontend/src/api/members.ts
index 4662f739a..f3a527b20 100644
--- a/frontend/src/api/members.ts
+++ b/frontend/src/api/members.ts
@@ -2,10 +2,6 @@ import { END_POINTS } from '@/routes';
 
 import { apiClient } from './config';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
-
 export const getMemberName = async (memberId: number) => {
   const response = await apiClient.get(`${END_POINTS.MEMBERS}/${memberId}/name`);
 
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 7ae76afe7..fe6f6e7c9 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -11,7 +11,6 @@ import {
   LIKE_API_URL,
 } from '@/api';
 import { API_URL } from '@/api/config';
-import { MEMBER_API_URL } from '@/api/members';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
 
@@ -242,7 +241,7 @@ const likeHandlers = [
   }),
 ];
 
-const memberHandlers = [http.get(`${MEMBER_API_URL}/:id/name`, () => HttpResponse.json({ name: 'll' }))];
+const memberHandlers = [http.get(`${API_URL}${END_POINTS.MEMBERS}/:id/name`, () => HttpResponse.json({ name: 'll' }))];
 
 export const handlers = [
   ...tagHandlers,

From 2cb566ded16f09c93bcb21f1a58639ba953ece8e Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 14:13:30 +0900
Subject: [PATCH 08/18] =?UTF-8?q?refactor(api):=20tags=20-=20apiClient?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD,=20MSW=20handler=20-=20tags?=
 =?UTF-8?q?=EC=9D=98=20API=5FURL=20=EC=9D=98=EC=A1=B4=EC=84=B1=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/index.ts      |  2 +-
 frontend/src/api/tags.ts       | 20 +++++---------------
 frontend/src/mocks/handlers.ts |  3 +--
 3 files changed, 7 insertions(+), 18 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 5cfd49b98..721bc3379 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,5 +1,5 @@
 export { getCategoryList, postCategory, deleteCategory } from './categories';
-export { TAG_API_URL, getTagList } from './tags';
+export { getTagList } from './tags';
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {
diff --git a/frontend/src/api/tags.ts b/frontend/src/api/tags.ts
index 19ea86616..b2cee1ff0 100644
--- a/frontend/src/api/tags.ts
+++ b/frontend/src/api/tags.ts
@@ -1,22 +1,12 @@
 import { END_POINTS } from '@/routes';
-import { TagListResponse } from '@/types/api';
 
-import { customFetch } from './customFetch';
-
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const TAG_API_URL = `${API_URL}${END_POINTS.TAGS}`;
+import { apiClient } from './config';
 
 export const getTagList = async (memberId: number) => {
-  const url = `${TAG_API_URL}?memberId=${memberId}`;
-
-  const response = await customFetch<TagListResponse>({
-    url,
+  const queryParams = new URLSearchParams({
+    memberId: memberId.toString(),
   });
+  const response = await apiClient.get(`${END_POINTS.TAGS}?${queryParams.toString()}`);
 
-  if ('tags' in response) {
-    return response;
-  }
-
-  throw new Error(response.detail);
+  return await response.json();
 };
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index fe6f6e7c9..bfd37c8bd 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -7,7 +7,6 @@ import {
   LOGIN_STATE_API_URL,
   LOGOUT_API_URL,
   SIGNUP_API_URL,
-  TAG_API_URL,
   LIKE_API_URL,
 } from '@/api';
 import { API_URL } from '@/api/config';
@@ -191,7 +190,7 @@ const categoryHandlers = [
   }),
 ];
 
-const tagHandlers = [http.get(`${TAG_API_URL}`, () => HttpResponse.json(mockTagList))];
+const tagHandlers = [http.get(`${API_URL}${END_POINTS.TAGS}`, () => HttpResponse.json(mockTagList))];
 
 const likeHandlers = [
   http.post(`${LIKE_API_URL}/:templateId`, (req) => {

From 8b75c4d49c85a0b048210b187fbdcd753567ef20 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 15:43:56 +0900
Subject: [PATCH 09/18] =?UTF-8?q?refactor(api):=20=EC=A2=8B=EC=95=84?=
 =?UTF-8?q?=EC=9A=94=20POST,=20DELETE=20-=20apiClient=EB=A1=9C=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD,=20handler=EC=9D=98=20API=5FURL=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/index.ts                     |  2 +-
 frontend/src/api/like.ts                      | 27 +++----------------
 frontend/src/mocks/handlers.ts                |  5 ++--
 .../src/queries/likes/useDislikeMutation.ts   |  2 +-
 frontend/src/queries/likes/useLikeMutation.ts |  2 +-
 5 files changed, 8 insertions(+), 30 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 721bc3379..080b45fbd 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -26,5 +26,5 @@ export {
   getLoginState,
   checkName,
 } from './authentication';
-export { LIKE_API_URL, postLike, deleteLike } from './like';
+export { postLike, deleteLike } from './like';
 export { getMemberName } from './members';
diff --git a/frontend/src/api/like.ts b/frontend/src/api/like.ts
index 86ae1c466..8f93599fc 100644
--- a/frontend/src/api/like.ts
+++ b/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}`);
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index bfd37c8bd..0f318a203 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -7,7 +7,6 @@ import {
   LOGIN_STATE_API_URL,
   LOGOUT_API_URL,
   SIGNUP_API_URL,
-  LIKE_API_URL,
 } from '@/api';
 import { API_URL } from '@/api/config';
 import { END_POINTS } from '@/routes';
@@ -193,7 +192,7 @@ const categoryHandlers = [
 const tagHandlers = [http.get(`${API_URL}${END_POINTS.TAGS}`, () => HttpResponse.json(mockTagList))];
 
 const likeHandlers = [
-  http.post(`${LIKE_API_URL}/:templateId`, (req) => {
+  http.post(`${API_URL}${END_POINTS.LIKES}/:templateId`, (req) => {
     const { templateId } = req.params;
     const template = mockTemplateList.templates.find((temp) => temp.id.toString() === templateId);
 
@@ -216,7 +215,7 @@ const likeHandlers = [
     });
   }),
 
-  http.delete(`${LIKE_API_URL}/:templateId`, (req) => {
+  http.delete(`${API_URL}${END_POINTS.LIKES}/:templateId`, (req) => {
     const { templateId } = req.params;
     const template = mockTemplateList.templates.find((temp) => temp.id.toString() === templateId);
 
diff --git a/frontend/src/queries/likes/useDislikeMutation.ts b/frontend/src/queries/likes/useDislikeMutation.ts
index 72e6e86ca..96c63ee06 100644
--- a/frontend/src/queries/likes/useDislikeMutation.ts
+++ b/frontend/src/queries/likes/useDislikeMutation.ts
@@ -4,5 +4,5 @@ import { deleteLike } from '@/api';
 
 export const useDislikeMutation = () =>
   useMutation({
-    mutationFn: (templateId: number) => deleteLike({ templateId }),
+    mutationFn: (templateId: number) => deleteLike(templateId),
   });
diff --git a/frontend/src/queries/likes/useLikeMutation.ts b/frontend/src/queries/likes/useLikeMutation.ts
index a1eae021b..7e3caa9e3 100644
--- a/frontend/src/queries/likes/useLikeMutation.ts
+++ b/frontend/src/queries/likes/useLikeMutation.ts
@@ -4,5 +4,5 @@ import { postLike } from '@/api';
 
 export const useLikeMutation = () =>
   useMutation({
-    mutationFn: (templateId: number) => postLike({ templateId }),
+    mutationFn: (templateId: number) => postLike(templateId),
   });

From ceb82d1c749ec4f6b0147c107f77eb3442673700 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:16:14 +0900
Subject: [PATCH 10/18] =?UTF-8?q?refactor(api):=20templates=20-=20get,=20p?=
 =?UTF-8?q?ost,=20edit,=20delete=20=EC=9A=94=EC=B2=AD=EC=9D=84=20apiClient?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/templates.ts                 | 54 +++++--------------
 .../TemplateEditPage/TemplateEditPage.tsx     |  3 +-
 .../useTemplateEditMutation.spec.tsx          |  5 +-
 frontend/src/types/api.ts                     |  1 +
 4 files changed, 19 insertions(+), 44 deletions(-)

diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index 6f769b45f..b28d1a0da 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -1,16 +1,8 @@
 import { END_POINTS } from '@/routes';
-import type {
-  Template,
-  TemplateRequest,
-  TemplateEditRequest,
-  TemplateListResponse,
-  TemplateUploadRequest,
-  TemplateListRequest,
-} from '@/types';
+import type { TemplateRequest, TemplateEditRequest, TemplateUploadRequest, TemplateListRequest } from '@/types';
 import { SortingOption } from '@/types';
 
 import { apiClient } from './config';
-import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
@@ -66,17 +58,9 @@ export const getTemplateList = async ({
     queryParams.append('keyword', keyword);
   }
 
-  const url = `${TEMPLATE_API_URL}?${queryParams.toString()}`;
-
-  const response = await customFetch<TemplateListResponse>({
-    url,
-  });
-
-  if ('templates' in response) {
-    return response;
-  }
+  const response = await apiClient.get(`${END_POINTS.TEMPLATES_EXPLORE}?${queryParams.toString()}`);
 
-  throw new Error(response.detail);
+  return await response.json();
 };
 
 export const getLikedTemplateList = async ({
@@ -91,9 +75,8 @@ export const getLikedTemplateList = async ({
   });
 
   const response = await apiClient.get(`${END_POINTS.LIKED_TEMPLATES}?${queryParams.toString()}`);
-  const data = response.json();
 
-  return data;
+  return await response.json();
 };
 
 export const getTemplateExplore = async ({
@@ -102,7 +85,7 @@ export const getTemplateExplore = async ({
   size = PAGE_SIZE,
   keyword,
   tagIds,
-}: TemplateListRequest): Promise<TemplateListResponse> => {
+}: TemplateListRequest) => {
   const queryParams = new URLSearchParams({
     sort,
     page: page.toString(),
@@ -118,32 +101,21 @@ export const getTemplateExplore = async ({
   }
 
   const response = await apiClient.get(`${END_POINTS.TEMPLATES_EXPLORE}?${queryParams.toString()}`);
-  const data = response.json();
 
-  return data;
+  return await response.json();
 };
 
-export const getTemplate = async ({ id }: TemplateRequest): Promise<Template> => {
+export const getTemplate = async ({ id }: TemplateRequest) => {
   const response = await apiClient.get(`${END_POINTS.TEMPLATES_EXPLORE}/${id}`);
-  const data = response.json();
 
-  return data;
+  return await response.json();
 };
 
-export const postTemplate = async (newTemplate: TemplateUploadRequest): Promise<Response> =>
+export const postTemplate = async (newTemplate: TemplateUploadRequest) =>
   await apiClient.post(`${END_POINTS.TEMPLATES_EXPLORE}`, newTemplate);
 
-export const editTemplate = async ({ id, template }: { id: number; template: TemplateEditRequest }): Promise<void> => {
-  await customFetch({
-    method: 'POST',
-    url: `${TEMPLATE_API_URL}/${id}`,
-    body: JSON.stringify(template),
-  });
-};
+export const editTemplate = async (template: TemplateEditRequest) =>
+  await apiClient.post(`${END_POINTS.TEMPLATES_EXPLORE}/${template.id}`, template);
 
-export const deleteTemplate = async (idList: number[]): Promise<void> => {
-  await customFetch({
-    method: 'DELETE',
-    url: `${TEMPLATE_API_URL}/${idList.join(',')}`,
-  });
-};
+export const deleteTemplate = async (idList: number[]) =>
+  await apiClient.delete(`${END_POINTS.TEMPLATES_EXPLORE}/${idList.join(',')}`);
diff --git a/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx b/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
index bae508142..c89028233 100644
--- a/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
+++ b/frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx
@@ -90,6 +90,7 @@ const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
     const updateSourceCodes = orderedSourceCodes.filter((sourceCode) => sourceCode.id);
 
     const templateUpdate: TemplateEditRequest = {
+      id: template.id,
       title,
       description,
       createSourceCodes,
@@ -101,7 +102,7 @@ const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
     };
 
     try {
-      await updateTemplate({ id: template.id, template: templateUpdate });
+      await updateTemplate(templateUpdate);
       toggleEditButton();
     } catch (error) {
       console.error('Failed to update template:', error);
diff --git a/frontend/src/queries/templates/useTemplateEditMutation.spec.tsx b/frontend/src/queries/templates/useTemplateEditMutation.spec.tsx
index f402d0bf9..ab49e1a42 100644
--- a/frontend/src/queries/templates/useTemplateEditMutation.spec.tsx
+++ b/frontend/src/queries/templates/useTemplateEditMutation.spec.tsx
@@ -16,7 +16,8 @@ describe('useTemplateEditMutation', () => {
   it('templates울 수정할 수 있다.', async () => {
     const { result } = renderHook(() => useTemplateEditMutation(2024), { wrapper: queryWrapper });
 
-    const template: TemplateEditRequest = {
+    const editedTemplate: TemplateEditRequest = {
+      id: 2024,
       title: 'editTemplate',
       description: '',
       createSourceCodes: [],
@@ -33,7 +34,7 @@ describe('useTemplateEditMutation', () => {
       visibility: 'PUBLIC',
     };
 
-    await result.current.mutateAsync({ id: 2024, template });
+    await result.current.mutateAsync(editedTemplate);
 
     await waitFor(() => {
       expect(result.current.isSuccess).toBe(true);
diff --git a/frontend/src/types/api.ts b/frontend/src/types/api.ts
index ca1fb3bef..19ae89476 100644
--- a/frontend/src/types/api.ts
+++ b/frontend/src/types/api.ts
@@ -16,6 +16,7 @@ export interface TemplateUploadRequest {
 }
 
 export interface TemplateEditRequest {
+  id: number;
   title: string;
   description: string;
   createSourceCodes: SourceCodes[];

From c718c2a583481b09053720bebb7c24ce97e0450c Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:17:13 +0900
Subject: [PATCH 11/18] =?UTF-8?q?refactor(mocks):=20=08TEMPLATE=5FAPI=5FUR?=
 =?UTF-8?q?L=20=EC=9A=94=EC=B2=AD=20=EA=B2=BD=EB=A1=9C=20=EC=9D=98?=
 =?UTF-8?q?=EC=A1=B4=EC=84=B1=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/index.ts      |  1 -
 frontend/src/api/templates.ts  |  4 ----
 frontend/src/mocks/handlers.ts | 19 ++++++-------------
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 080b45fbd..c53d98512 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -3,7 +3,6 @@ export { getTagList } from './tags';
 export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {
-  TEMPLATE_API_URL,
   PAGE_SIZE,
   SORTING_OPTIONS,
   DEFAULT_SORTING_OPTION,
diff --git a/frontend/src/api/templates.ts b/frontend/src/api/templates.ts
index b28d1a0da..7609d7604 100644
--- a/frontend/src/api/templates.ts
+++ b/frontend/src/api/templates.ts
@@ -4,10 +4,6 @@ import { SortingOption } from '@/types';
 
 import { apiClient } from './config';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-export const TEMPLATE_API_URL = `${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`;
-
 export const PAGE_SIZE = 20;
 
 export const SORTING_OPTIONS: SortingOption[] = [
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 0f318a203..472499db2 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,13 +1,6 @@
 import { HttpResponse, http } from 'msw';
 
-import {
-  TEMPLATE_API_URL,
-  CHECK_NAME_API_URL,
-  LOGIN_API_URL,
-  LOGIN_STATE_API_URL,
-  LOGOUT_API_URL,
-  SIGNUP_API_URL,
-} from '@/api';
+import { CHECK_NAME_API_URL, LOGIN_API_URL, LOGIN_STATE_API_URL, LOGOUT_API_URL, SIGNUP_API_URL } from '@/api';
 import { API_URL } from '@/api/config';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
@@ -17,7 +10,7 @@ import mockTagList from './tagList.json';
 import mockTemplateList from './templateList.json';
 
 export const templateHandlers = [
-  http.get(`${TEMPLATE_API_URL}`, (req) => {
+  http.get(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`, (req) => {
     const url = new URL(req.request.url);
     const keyword = url.searchParams.get('keyword');
     const categoryId = url.searchParams.get('categoryId');
@@ -73,7 +66,7 @@ export const templateHandlers = [
       numberOfElements,
     });
   }),
-  http.get(`${TEMPLATE_API_URL}/:id`, (req) => {
+  http.get(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}/:id`, (req) => {
     const { id } = req.params;
 
     const template = mockTemplateList.templates.find((template) => template.id.toString() === id);
@@ -84,9 +77,9 @@ export const templateHandlers = [
       return HttpResponse.json({ status: 404, message: 'Template not found' });
     }
   }),
-  http.post(`${TEMPLATE_API_URL}`, async () => HttpResponse.json({ status: 201 })),
-  http.post(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 200 })),
-  http.delete(`${TEMPLATE_API_URL}/:id`, async () => HttpResponse.json({ status: 204 })),
+  http.post(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}`, async () => HttpResponse.json({ status: 201 })),
+  http.post(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}/:id`, async () => HttpResponse.json({ status: 200 })),
+  http.delete(`${API_URL}${END_POINTS.TEMPLATES_EXPLORE}/:id`, async () => HttpResponse.json({ status: 204 })),
 ];
 
 const authenticationHandler = [

From 2e183008c5b7fbd0fbfc002761c66af6dedc14de Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:33:57 +0900
Subject: [PATCH 12/18] =?UTF-8?q?refactor(api):=20authentication=20-=20?=
 =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85,=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=9D=B8=20=EC=9A=94=EC=B2=AD=EC=9D=84=20apiClient=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/authentication.ts            | 26 +++----------------
 .../authentication/useLoginMutation.ts        | 23 ++++++++--------
 2 files changed, 15 insertions(+), 34 deletions(-)

diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
index 116fd4129..77efefcdf 100644
--- a/frontend/src/api/authentication.ts
+++ b/frontend/src/api/authentication.ts
@@ -1,6 +1,5 @@
 import { END_POINTS } from '@/routes';
 import type { LoginRequest, SignupRequest } from '@/types';
-import { MemberInfo } from '@/types';
 
 import { apiClient } from './config';
 import { customFetch } from './customFetch';
@@ -13,29 +12,12 @@ 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 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;
-  }
+export const postSignup = async (signupInfo: SignupRequest) => await apiClient.post(`${END_POINTS.SIGNUP}`, signupInfo);
 
-  if (response.status >= 400) {
-    return { memberId: undefined, name: undefined };
-  }
+export const postLogin = async (loginInfo: LoginRequest) => {
+  const response = await apiClient.post(`${END_POINTS.LOGIN}`, loginInfo);
 
-  throw new Error(response.detail);
+  return await response.json();
 };
 
 export const postLogout = async () => {
diff --git a/frontend/src/queries/authentication/useLoginMutation.ts b/frontend/src/queries/authentication/useLoginMutation.ts
index 24b21abb4..23b1e5731 100644
--- a/frontend/src/queries/authentication/useLoginMutation.ts
+++ b/frontend/src/queries/authentication/useLoginMutation.ts
@@ -5,31 +5,30 @@ import { ToastContext } from '@/contexts';
 import { useCustomContext, useCustomNavigate } from '@/hooks';
 import { useAuth } from '@/hooks/authentication/useAuth';
 import { END_POINTS } from '@/routes';
-import { LoginRequest } from '@/types';
+import { LoginRequest, MemberInfo } from '@/types';
 
 export const useLoginMutation = () => {
   const { handleLoginState, handleMemberInfo } = useAuth();
   const { failAlert, successAlert } = useCustomContext(ToastContext);
   const navigate = useCustomNavigate();
 
-  return useMutation({
+  return useMutation<MemberInfo, Error, LoginRequest>({
     mutationFn: (loginInfo: LoginRequest) => postLogin(loginInfo),
     onSuccess: (res) => {
-      if (res.memberId === undefined) {
-        handleLoginState(false);
-        handleMemberInfo(res);
-        failAlert('로그인에 실패하였습니다.');
-      } else {
-        localStorage.setItem('name', String(res.name));
-        localStorage.setItem('memberId', String(res.memberId));
+      const { memberId, name } = res;
+
+      if (memberId && name) {
+        localStorage.setItem('name', String(name));
+        localStorage.setItem('memberId', String(memberId));
         handleMemberInfo(res);
         handleLoginState(true);
-        navigate(END_POINTS.memberTemplates(res.memberId));
         successAlert('로그인 성공!');
+        navigate(END_POINTS.memberTemplates(memberId));
       }
     },
-    onError: (error) => {
-      console.error(error);
+    onError: () => {
+      handleLoginState(false);
+      handleMemberInfo({ memberId: undefined, name: undefined });
       failAlert('로그인에 실패하였습니다.');
     },
   });

From 1518d28cbcd5da7169184ed1c0988f17cb163749 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:37:12 +0900
Subject: [PATCH 13/18] =?UTF-8?q?refactor(api):=20=EB=A1=9C=EA=B7=B8?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=9A=94=EC=B2=AD=EC=9D=84=20apiClient?=
 =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/authentication.ts | 14 +++-----------
 1 file changed, 3 insertions(+), 11 deletions(-)

diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
index 77efefcdf..1f016a513 100644
--- a/frontend/src/api/authentication.ts
+++ b/frontend/src/api/authentication.ts
@@ -2,7 +2,6 @@ import { END_POINTS } from '@/routes';
 import type { LoginRequest, SignupRequest } from '@/types';
 
 import { apiClient } from './config';
-import { customFetch } from './customFetch';
 
 const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
 
@@ -12,22 +11,15 @@ 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 postSignup = async (signupInfo: SignupRequest) => await apiClient.post(`${END_POINTS.SIGNUP}`, signupInfo);
+export const postSignup = async (signupInfo: SignupRequest) => await apiClient.post(END_POINTS.SIGNUP, signupInfo);
 
 export const postLogin = async (loginInfo: LoginRequest) => {
-  const response = await apiClient.post(`${END_POINTS.LOGIN}`, loginInfo);
+  const response = await apiClient.post(END_POINTS.LOGIN, loginInfo);
 
   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);
 

From 5efa301415906a7b7172ba7196d25a733fbc2fd9 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:51:11 +0900
Subject: [PATCH 14/18] =?UTF-8?q?feat(Error):=20errorCode,=20instance?=
 =?UTF-8?q?=EB=A5=BC=20=ED=86=B5=ED=95=B4=20getErrorMessage=20=ED=95=A8?=
 =?UTF-8?q?=EC=88=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/ApiClient.ts             |  6 +++---
 frontend/src/api/Error/getErrorMessage.ts | 10 ++++++++++
 2 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/api/Error/getErrorMessage.ts

diff --git a/frontend/src/api/ApiClient.ts b/frontend/src/api/ApiClient.ts
index 44c8bd7d0..2fb10f7d0 100644
--- a/frontend/src/api/ApiClient.ts
+++ b/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 =
@@ -84,14 +85,13 @@ export 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);
   }
 }
diff --git a/frontend/src/api/Error/getErrorMessage.ts b/frontend/src/api/Error/getErrorMessage.ts
new file mode 100644
index 000000000..bbb5515f1
--- /dev/null
+++ b/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 입니다';
+};

From e20477b1f9c004e7abeff9fccf3c510cd8e07be9 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:51:55 +0900
Subject: [PATCH 15/18] =?UTF-8?q?refactor(api):=20authentication=20-=20che?=
 =?UTF-8?q?ckName=20=ED=95=A8=EC=88=98=EB=A5=BC=20apiClient=EB=A1=9C=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/authentication.ts | 18 +-----------------
 1 file changed, 1 insertion(+), 17 deletions(-)

diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
index 1f016a513..e98ee0259 100644
--- a/frontend/src/api/authentication.ts
+++ b/frontend/src/api/authentication.ts
@@ -25,22 +25,6 @@ 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()}`);
 };

From 7caab2a50b8770fa004cb435d4f29680ce7049f5 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:58:33 +0900
Subject: [PATCH 16/18] =?UTF-8?q?refactor(mocks):=20handlers=20-=20authent?=
 =?UTF-8?q?ication=20=EA=B4=80=EB=A0=A8=20=EC=97=94=EB=93=9C=20=ED=8F=AC?=
 =?UTF-8?q?=EC=9D=B8=ED=8A=B8=EC=9D=98=20API=5FURL=20=EC=9D=98=EC=A1=B4?=
 =?UTF-8?q?=EC=84=B1=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/authentication.ts |  8 --------
 frontend/src/mocks/handlers.ts     | 11 +++++------
 2 files changed, 5 insertions(+), 14 deletions(-)

diff --git a/frontend/src/api/authentication.ts b/frontend/src/api/authentication.ts
index e98ee0259..f13e9fc3b 100644
--- a/frontend/src/api/authentication.ts
+++ b/frontend/src/api/authentication.ts
@@ -3,14 +3,6 @@ import type { LoginRequest, SignupRequest } from '@/types';
 
 import { apiClient } from './config';
 
-const API_URL = process.env.REACT_APP_API_URL || 'https://default-url.com';
-
-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 postSignup = async (signupInfo: SignupRequest) => await apiClient.post(END_POINTS.SIGNUP, signupInfo);
 
 export const postLogin = async (loginInfo: LoginRequest) => {
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 472499db2..9a2876695 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,6 +1,5 @@
 import { HttpResponse, http } from 'msw';
 
-import { CHECK_NAME_API_URL, LOGIN_API_URL, LOGIN_STATE_API_URL, LOGOUT_API_URL, SIGNUP_API_URL } from '@/api';
 import { API_URL } from '@/api/config';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';
@@ -83,9 +82,9 @@ export const templateHandlers = [
 ];
 
 const authenticationHandler = [
-  http.post(`${SIGNUP_API_URL}`, async () => HttpResponse.json({ status: 201 })),
+  http.post(`${API_URL}${END_POINTS.SIGNUP}`, async () => HttpResponse.json({ status: 201 })),
   http.post(
-    `${LOGIN_API_URL}`,
+    `${API_URL}${END_POINTS.LOGIN}`,
     () =>
       new HttpResponse(JSON.stringify({ memberId: 1, name: 'jay' }), {
         status: 200,
@@ -96,7 +95,7 @@ const authenticationHandler = [
       }),
   ),
   http.post(
-    `${LOGOUT_API_URL}`,
+    `${API_URL}${END_POINTS.LOGOUT}`,
     () =>
       new HttpResponse(null, {
         status: 204,
@@ -104,7 +103,7 @@ const authenticationHandler = [
       }),
   ),
   http.get(
-    `${CHECK_NAME_API_URL}`,
+    `${API_URL}${END_POINTS.CHECK_NAME}`,
     () =>
       new HttpResponse(
         JSON.stringify({
@@ -119,7 +118,7 @@ const authenticationHandler = [
       ),
   ),
   http.get(
-    `${LOGIN_STATE_API_URL}`,
+    `${API_URL}${END_POINTS.LOGIN_CHECK}`,
     () =>
       new HttpResponse(
         JSON.stringify({

From cf71479be64677d3c05a4ddb0758a3bc497b8208 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Thu, 21 Nov 2024 16:58:59 +0900
Subject: [PATCH 17/18] =?UTF-8?q?refactor(api):=20customFetch=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0,=20=EC=82=AC=EC=9A=A9=ED=95=98=EC=A7=80=20=EC=95=8A?=
 =?UTF-8?q?=EB=8A=94=20URL=20=EB=B3=80=EC=88=98=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/customFetch.ts | 63 ---------------------------------
 frontend/src/api/index.ts       | 14 +-------
 2 files changed, 1 insertion(+), 76 deletions(-)
 delete mode 100644 frontend/src/api/customFetch.ts

diff --git a/frontend/src/api/customFetch.ts b/frontend/src/api/customFetch.ts
deleted file mode 100644
index 984b1f76d..000000000
--- a/frontend/src/api/customFetch.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { CustomError } from '@/types';
-
-interface Props {
-  url: string;
-  method?: 'GET' | 'POST' | 'PATCH' | 'DELETE' | 'PUT';
-  headers?: RequestInit['headers'];
-  body?: RequestInit['body'];
-  errorMessage?: string;
-}
-
-const isCustomError = (response: unknown): response is CustomError =>
-  typeof response === 'object' && response !== null && 'status' in response && 'detail' in response;
-
-export const customFetch = async <T>({ url, headers, method = 'GET', body }: Props): Promise<T | CustomError> => {
-  try {
-    const response = await fetch(url, {
-      method,
-      headers: {
-        'Content-Type': 'application/json',
-        ...headers,
-      },
-      credentials: 'include',
-      body,
-    });
-
-    let responseBody;
-    const contentType = response.headers.get('Content-Type');
-
-    if (contentType && (contentType.includes('application/json') || contentType.includes('application/problem+json'))) {
-      responseBody = await response.json();
-    } else {
-      responseBody = null;
-    }
-
-    if (!response.ok) {
-      const error: CustomError = {
-        type: responseBody?.type || 'UnknownError',
-        title: responseBody?.title || 'Error',
-        status: response.status,
-        detail: responseBody?.detail || 'An error occurred',
-        instance: url,
-      };
-
-      return error;
-    }
-
-    return responseBody as T;
-  } catch (error) {
-    if (isCustomError(error)) {
-      throw error as CustomError;
-    } else {
-      const networkError: CustomError = {
-        type: 'NetworkError',
-        title: 'Network Error',
-        status: 0,
-        detail: error instanceof Error ? error.message : 'An unknown network error occurred',
-        instance: url,
-      };
-
-      throw networkError;
-    }
-  }
-};
diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index c53d98512..86db83a4a 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,6 +1,5 @@
 export { getCategoryList, postCategory, deleteCategory } from './categories';
 export { getTagList } from './tags';
-export { customFetch } from './customFetch';
 export { QUERY_KEY } from './queryKeys';
 export {
   PAGE_SIZE,
@@ -13,17 +12,6 @@ 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 { postSignup, postLogin, postLogout, getLoginState, checkName } from './authentication';
 export { postLike, deleteLike } from './like';
 export { getMemberName } from './members';

From f748d079ea99a83fbf10a3fb48afe7e77493b677 Mon Sep 17 00:00:00 2001
From: jayming66 <mjw8941@gmail.com>
Date: Fri, 22 Nov 2024 15:11:58 +0900
Subject: [PATCH 18/18] =?UTF-8?q?refactor(api):=20API=5FURL=EC=9D=84=20ind?=
 =?UTF-8?q?ex=EC=97=90=EC=84=9C=20export?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/api/index.ts      | 6 ++++--
 frontend/src/mocks/handlers.ts | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/api/index.ts b/frontend/src/api/index.ts
index 86db83a4a..14055ec8e 100644
--- a/frontend/src/api/index.ts
+++ b/frontend/src/api/index.ts
@@ -1,6 +1,6 @@
-export { getCategoryList, postCategory, deleteCategory } from './categories';
-export { getTagList } from './tags';
+export { API_URL } from './config';
 export { QUERY_KEY } from './queryKeys';
+
 export {
   PAGE_SIZE,
   SORTING_OPTIONS,
@@ -13,5 +13,7 @@ export {
   deleteTemplate,
 } from './templates';
 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';
diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts
index 9a2876695..9d3e57ba9 100644
--- a/frontend/src/mocks/handlers.ts
+++ b/frontend/src/mocks/handlers.ts
@@ -1,6 +1,6 @@
 import { HttpResponse, http } from 'msw';
 
-import { API_URL } from '@/api/config';
+import { API_URL } from '@/api';
 import { END_POINTS } from '@/routes';
 import { Category } from '@/types';