[Fix] Axios 인스턴스에 공통 응답(에러 포함) 처리 함수 추가

src/api/core/index.ts

@@ -2,6 +2,8 @@ import { notFound, redirect } from 'next/navigation';
 
 import axios from 'axios';
 
+import { CommonErrorResponse, CommonSuccessResponse } from '@/types/service/common';
+
 export const baseAPI = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,
   timeout: 20000,
@@ -45,6 +47,44 @@ baseAPI.interceptors.response.use(
       }
     }
 
-    return Promise.reject(error);
+    const errorResponse: CommonErrorResponse = error.response?.data || {
+      type: 'about:blank',
+      title: 'Network Error',
+      status: 0,
+      detail: '서버와 연결할 수 없습니다.',
+      instance: error.config?.url || '',
+      errorCode: 'NETWORK_ERROR',
+    };
+
+    throw errorResponse;
   },
 );
+
+// 공통 응답 형식 처리를 위한 api 헬퍼
+export const api = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  get: async <T>(url: string, config?: any): Promise<T> => {
+    const response = await baseAPI.get<CommonSuccessResponse<T>>(url, config);
+    return response.data.data;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  post: async <T>(url: string, data?: any, config?: any): Promise<T> => {
+    const response = await baseAPI.post<CommonSuccessResponse<T>>(url, data, config);
+    return response.data.data;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  put: async <T>(url: string, data?: any, config?: any): Promise<T> => {
+    const response = await baseAPI.put<CommonSuccessResponse<T>>(url, data, config);
+    return response.data.data;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  delete: async <T>(url: string, config?: any): Promise<T> => {
+    const response = await baseAPI.delete<CommonSuccessResponse<T>>(url, config);
+    return response.data.data;
+  },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  patch: async <T>(url: string, data?: any, config?: any): Promise<T> => {
+    const response = await baseAPI.patch<CommonSuccessResponse<T>>(url, data, config);
+    return response.data.data;
+  },
+};

src/api/service/user-service/index.ts

@@ -1,55 +1,20 @@
-import { baseAPI } from '@/api/core';
+import { api } from '@/api/core';
 import { Follow, GetUserPayload, UpdateMePayload, User } from '@/types/service/user';
 
 export const userServiceRemote = () => ({
   // 1. 사용자 단건 조회
-  getUser: async (payload: GetUserPayload) => {
-    try {
-      const response = await baseAPI.get<User>(`/users/${payload.userId}`);
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
-  },
+  getUser: async (payload: GetUserPayload) => api.get<User>(`/users/${payload.userId}`),
 
   // 2. 프로필 편집
-  updateMe: async (payload: UpdateMePayload) => {
-    try {
-      const response = await baseAPI.patch<User>('/users', payload);
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
-  },
+  updateMe: async (payload: UpdateMePayload) => api.patch<User>('/users', payload),
 
   // 3. 회원탈퇴
-  deleteMe: async () => {
-    try {
-      const response = await baseAPI.delete(`/users`);
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
-  },
+  deleteMe: async () => api.delete<User>(`/users`),
   // 4. 사용자 프로필 이미지 변경
 
   // 5. 사용자 팔로우
-  followUser: async (payload: Follow) => {
-    try {
-      const response = await baseAPI.post(`/follows`, payload);
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
-  },
+  followUser: async (payload: Follow) => api.post<void>(`/follows`, payload),
 
   // 6. 사용자 언팔로우
-  unfollowUser: async (payload: Follow) => {
-    try {
-      const response = await baseAPI.delete(`/follows/${payload.followeeId}`);
-      return response.data;
-    } catch (error) {
-      throw error;
-    }
-  },
+  unfollowUser: async (payload: Follow) => api.delete<void>(`/follows/${payload.followeeId}`),
 });

src/mock/service/common/common-mock.ts

@@ -0,0 +1,26 @@
+import { CommonSuccessResponse } from '@/types/service/common';
+
+export const createMockSuccessResponse = <T>(data: T): CommonSuccessResponse<T> => ({
+  status: 200,
+  message: '요청이 정상적으로 처리되었습니다.',
+  data,
+});
+
+interface CreateErrorResponseType {
+  status: number;
+  detail: string;
+  errorCode: string;
+}
+
+export const createMockErrorResponse = ({
+  status,
+  detail,
+  errorCode,
+}: CreateErrorResponseType) => ({
+  type: `https://example.com/errors/${errorCode}`,
+  title: errorCode.toUpperCase(),
+  status,
+  detail,
+  instance: '/api/test',
+  errorCode,
+});

src/mock/service/user/users-handler.ts

@@ -2,37 +2,47 @@ import { http, HttpResponse } from 'msw';
 
 import { User } from '@/types/service/user';
 
+import { createMockErrorResponse, createMockSuccessResponse } from '../common/common-mock';
 import { mockUserItems } from './users-mock';
 
-const getUserItemMock = http.get(`*/api/v1/users/:userId`, ({ params }) => {
+const getUserItemMock = http.get(`*/users/:userId`, ({ params }) => {
   const id = Number(params.userId);
   const user = mockUserItems.find((item) => item.id === id);
 
   if (!user) {
-    return HttpResponse.json({ message: '존재하지 않는 유저입니다' }, { status: 404 });
+    return HttpResponse.json(
+      createMockErrorResponse({
+        status: 404,
+        detail: '존재하지 않는 유저입니다.',
+        errorCode: 'U001',
+      }),
+      { status: 404 },
+    );
   }
 
-  return HttpResponse.json(user);
+  return HttpResponse.json(createMockSuccessResponse(user));
 });
 
-const updateUserItemMock = http.patch(`*/api/v1/users`, async ({ request }) => {
+const updateUserItemMock = http.patch(`*/users`, async ({ request }) => {
   const body = (await request.json()) as User;
-  return HttpResponse.json({
-    ...mockUserItems[0],
-    ...body,
-  });
+  return HttpResponse.json(
+    createMockSuccessResponse({
+      ...mockUserItems[0],
+      ...body,
+    }),
+  );
 });
 
-const deleteUserItemMock = http.delete(`*/api/v1/users`, async () => {
-  return new HttpResponse(null, { status: 204 });
+const deleteUserItemMock = http.delete(`*/users`, async () => {
+  return HttpResponse.json(createMockSuccessResponse(null));
 });
 
-const followUserItemMock = http.post(`*/api/v1/follows`, async () => {
-  return new HttpResponse(null, { status: 204 });
+const followUserItemMock = http.post(`*/follows`, async () => {
+  return HttpResponse.json(createMockSuccessResponse(null));
 });
 
-const unfollowUserItemMock = http.delete(`*/api/v1/follows/:followId`, async () => {
-  return new HttpResponse(null, { status: 204 });
+const unfollowUserItemMock = http.delete(`*/follows/:followId`, async () => {
+  return HttpResponse.json(createMockSuccessResponse(null));
 });
 
 export const userHandlers = [

src/types/react-query.d.ts

@@ -0,0 +1,10 @@
+// types/react-query.d.ts
+import { CommonErrorResponse } from './service/common';
+
+import '@tanstack/react-query';
+
+declare module '@tanstack/react-query' {
+  interface Register {
+    defaultError: CommonErrorResponse;
+  }
+}

src/types/service/common.ts

@@ -6,3 +6,9 @@ export interface CommonErrorResponse {
   instance: string;
   errorCode?: string;
 }
+
+export interface CommonSuccessResponse<T> {
+  status: number;
+  message: string;
+  data: T;
+}