[Refactor] api 요청 함수 최적화

src/apis/services/httpMethod.ts

@@ -1,40 +1,44 @@
 import axiosInstance, { setAuthToken } from '@/lib/axiosInstance';
+import { handleHttpError } from '@/utils/handleHttpError';
 
-export async function GET<T>(url: string, token?: string): Promise<T> {
+type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
+
+interface RequestOptionsProps {
+  method: HttpMethod;
+  url: string;
+  data?: unknown;
+  token?: string;
+}
+
+async function request<T>({
+  method,
+  url,
+  data,
+  token,
+}: RequestOptionsProps): Promise<T> {
   try {
     if (token) {
       setAuthToken(token);
     }
-    const response = await axiosInstance.get(url);
-    return response.data;
-  } catch (error) {
-    throw new Error(error instanceof Error ? error.message : String(error));
-  }
-}
 
-export async function POST<T, U>(url: string, data?: U): Promise<T> {
-  try {
-    const response = await axiosInstance.post(url, data);
-    return response.data;
-  } catch (error) {
-    throw new Error(error instanceof Error ? error.message : String(error));
-  }
-}
+    const response = await axiosInstance.request<T>({
+      method,
+      url,
+      data,
+    });
 
-export async function PUT<T, U>(url: string, data: U): Promise<T> {
-  try {
-    const response = await axiosInstance.put(url, data);
     return response.data;
   } catch (error) {
-    throw new Error(error instanceof Error ? error.message : String(error));
+    handleHttpError(error);
+    throw error;
   }
 }
 
-export async function DELETE<T>(url: string): Promise<T> {
-  try {
-    const response = await axiosInstance.delete(url);
-    return response.data;
-  } catch (error) {
-    throw new Error(error instanceof Error ? error.message : String(error));
-  }
-}
+export const API = {
+  get: <T>(url: string, token?: string) =>
+    request<T>({ method: 'GET', url, token }),
+  post: <T, U>(url: string, data?: U) =>
+    request<T>({ method: 'POST', url, data }),
+  put: <T, U>(url: string, data: U) => request<T>({ method: 'PUT', url, data }),
+  delete: <T>(url: string) => request<T>({ method: 'DELETE', url }),
+};

src/hooks/apis/Auth/useChangePassword.ts

@@ -1,9 +1,10 @@
 import { useMutation, UseMutationResult } from '@tanstack/react-query';
 import { AxiosError, AxiosResponse } from 'axios';
+
+import { API } from '@/apis/services/httpMethod';
+import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { notify } from '@/store/useToastStore';
 import { ChangePasswordRequest } from '@/types/Auth/ChangePasswordRequest';
-import { PUT } from '@/apis/services/httpMethod';
-import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 
 interface ErrorResponse {
   message: string;
@@ -18,7 +19,7 @@ export const useChangePassword = (
 > => {
   return useMutation({
     mutationFn: (data: ChangePasswordRequest) =>
-      PUT<AxiosResponse, ChangePasswordRequest>(
+      API.put<AxiosResponse, ChangePasswordRequest>(
         API_ENDPOINTS.AUTH.PASSWORD,
         data,
       ),

src/hooks/apis/Auth/useFollowCountQuery.ts

@@ -1,6 +1,7 @@
-import { AxiosError } from 'axios';
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
-import { GET } from '@/apis/services/httpMethod';
+import { AxiosError } from 'axios';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 
@@ -17,7 +18,7 @@ export interface FollowCountResponse {
 
 const followCountOptions: UseQueryOptions<FollowCountResponse, AxiosError> = {
   queryKey: [QUERY_KEYS.FOLLOW_COUNT],
-  queryFn: () => GET<FollowCountResponse>(API_ENDPOINTS.AUTH.FOLLOW_COUNT),
+  queryFn: () => API.get<FollowCountResponse>(API_ENDPOINTS.AUTH.FOLLOW_COUNT),
 };
 
 export const useFollowCountQuery = () => {

src/hooks/apis/Auth/useModifyProfilePic.ts

@@ -4,11 +4,12 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 import { AxiosError, AxiosResponse } from 'axios';
-import { ModifyProfilePicRequest } from '@/types/Auth/ModifyProfilePicRequest';
-import { notify } from '@/store/useToastStore';
-import { QUERY_KEYS } from '@/constants/QueryKeys';
-import { PUT } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
+import { ModifyProfilePicRequest } from '@/types/Auth/ModifyProfilePicRequest';
 
 export const useModifyProfilePic = (): UseMutationResult<
   AxiosResponse,
@@ -19,7 +20,7 @@ export const useModifyProfilePic = (): UseMutationResult<
 
   return useMutation({
     mutationFn: (data: ModifyProfilePicRequest) =>
-      PUT<AxiosResponse, ModifyProfilePicRequest>(
+      API.put<AxiosResponse, ModifyProfilePicRequest>(
         API_ENDPOINTS.AUTH.PROFILE_PIC,
         data,
       ),

src/hooks/apis/Auth/useUserProfileQuery.ts

@@ -1,6 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
-import { GET } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { UserProfileResponse } from '@/types/response';
@@ -10,7 +11,7 @@ const userProfileOptions = (
 ): UseQueryOptions<UserProfileResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.USER_PROFILE, userId],
   queryFn: () =>
-    GET<UserProfileResponse>(API_ENDPOINTS.AUTH.USER_PROFILE(userId)),
+    API.get<UserProfileResponse>(API_ENDPOINTS.AUTH.USER_PROFILE(userId)),
 });
 
 export const useUserProfileQuery = (userId: number) => {

src/hooks/apis/Auth/useWithdrawal.ts

@@ -1,16 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
-import { DELETE } from '@/apis/services/httpMethod';
-import { WithdrawalResponse } from '@/types/response';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { notify } from '@/store/useToastStore';
+import { WithdrawalResponse } from '@/types/response';
 
 export const useWithdrawal = () => {
   const queryClient = useQueryClient();
   const router = useRouter();
 
   return useMutation({
-    mutationFn: () => DELETE<WithdrawalResponse>(API_ENDPOINTS.AUTH.WITHDRAWAL),
+    mutationFn: () =>
+      API.delete<WithdrawalResponse>(API_ENDPOINTS.AUTH.WITHDRAWAL),
     onSuccess: () => {
       notify('success', '회원탈퇴에 성공하였습니다.', 3000);
       document.cookie = 'token=; max-age=0; path=/;';

src/hooks/apis/Comment/useCreateCommentQuery.ts

@@ -1,18 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { POST } from '@/apis/services/httpMethod';
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
+import { TOAST_MESSAGES } from '@/constants/Messages';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { notify } from '@/store/useToastStore';
 import { CommentResponse, GetCommentRequest } from '@/types/Comment';
-import { TOAST_MESSAGES } from '@/constants/Messages';
 
 export const useCreateComment = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (postData: GetCommentRequest) =>
-      POST<CommentResponse, GetCommentRequest>(
+      API.post<CommentResponse, GetCommentRequest>(
         API_ENDPOINTS.COMMENT.CREATE,
         postData,
       ),

src/hooks/apis/Comment/useDeleteCommentQuery.ts

@@ -1,17 +1,18 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { notify } from '@/store/useToastStore';
-import { DELETE } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
-import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { TOAST_MESSAGES } from '@/constants/Messages';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
 import { CommentResponse } from '@/types/Comment';
 
 export const useDeleteComment = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (commentId: number) =>
-      DELETE<CommentResponse>(API_ENDPOINTS.COMMENT.DELETE(commentId)),
+      API.delete<CommentResponse>(API_ENDPOINTS.COMMENT.DELETE(commentId)),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.COMPLETE_DETAIL] });
       notify('success', TOAST_MESSAGES.COMMENT_DELETE_SUCCESS, 3000);

src/hooks/apis/Comment/usePutCommentQuery.ts

@@ -1,10 +1,11 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { notify } from '@/store/useToastStore';
-import { PUT } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
-import { CommentResponse, PutCommentRequest } from '@/types/Comment';
 import { TOAST_MESSAGES } from '@/constants/Messages';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
+import { CommentResponse, PutCommentRequest } from '@/types/Comment';
 
 interface PutCommentVariables {
   data: PutCommentRequest;
@@ -16,7 +17,7 @@ export const usePutComment = () => {
 
   return useMutation<CommentResponse, Error, PutCommentVariables>({
     mutationFn: ({ data, commentId }) =>
-      PUT<CommentResponse, PutCommentRequest>(
+      API.put<CommentResponse, PutCommentRequest>(
         API_ENDPOINTS.COMMENT.PUT(commentId),
         data,
       ),

src/hooks/apis/Complete/useGetCompleteDetailQuery.ts

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
-import { GET } from '@/apis/services/httpMethod';
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { GetCompleteDetailResponse } from '@/types/Completes';
@@ -11,7 +11,7 @@ const GetCompleteDetailOptions = (
 ): UseQueryOptions<GetCompleteDetailResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.COMPLETE_DETAIL, completeId],
   queryFn: () =>
-    GET<GetCompleteDetailResponse>(
+    API.get<GetCompleteDetailResponse>(
       API_ENDPOINTS.TODOS.GET_CERTIFIED_TODO(completeId),
     ),
 });

src/hooks/apis/Dashboard/useRecentTodosQuery.ts

@@ -4,7 +4,7 @@ import {
 } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
-import { GET } from '@/apis/services/httpMethod';
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { RecentTodosResponse } from '@/types/Dashboard';
@@ -14,7 +14,7 @@ export const recentTodosOptions = (
 ): UseSuspenseQueryOptions<RecentTodosResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.RECENT_TODOS],
   queryFn: () =>
-    GET<RecentTodosResponse>(
+    API.get<RecentTodosResponse>(
       `${API_ENDPOINTS.TODOS.GET_ALL}?lastTodoId=0&size=3`,
       token,
     ),

src/hooks/apis/Dashboard/useTodayProgressQuery.ts

@@ -1,7 +1,7 @@
 import { useQuery, UseQueryOptions } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
-import { GET } from '@/apis/services/httpMethod';
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { TodayProgressResponse } from '@/types/Dashboard';
@@ -11,7 +11,10 @@ export const todayProgressOptions = (
 ): UseQueryOptions<TodayProgressResponse, AxiosError> => ({
   queryKey: [QUERY_KEYS.TODAY_PROGRESS],
   queryFn: () =>
-    GET<TodayProgressResponse>(API_ENDPOINTS.TODOS.GET_TODAY_PROGRESS, token),
+    API.get<TodayProgressResponse>(
+      API_ENDPOINTS.TODOS.GET_TODAY_PROGRESS,
+      token,
+    ),
 });
 
 export const useTodayProgressQuery = () => {

src/hooks/apis/Dashboard/useTodosOfGoalsQuery.ts

@@ -4,7 +4,7 @@ import {
 } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 
-import { GET } from '@/apis/services/httpMethod';
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { TodosOfGoalsResponse } from '@/types/Dashboard';
@@ -17,7 +17,7 @@ export const todosOfGoalsOptions = (): UseInfiniteQueryOptions<
 > => ({
   queryKey: [QUERY_KEYS.TODOS_OF_GOALS],
   queryFn: ({ pageParam = 0 }) =>
-    GET<TodosOfGoalsResponse>(
+    API.get<TodosOfGoalsResponse>(
       `${API_ENDPOINTS.TODOS.GET_GOALS}?lastGoalId=${pageParam}&size=5`,
     ),
   getNextPageParam: (lastPage) => {

src/hooks/apis/Follow/useAssignFollowMutation.ts

@@ -1,9 +1,10 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { POST } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
-import { AssignFollowResponse, UserProfileResponse } from '@/types/response';
-import { notify } from '@/store/useToastStore';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
+import { AssignFollowResponse, UserProfileResponse } from '@/types/response';
 
 interface FollowId {
   userId: number;
@@ -14,7 +15,7 @@ export const useAssignFollowMutation = () => {
 
   return useMutation({
     mutationFn: (userId: number) =>
-      POST<AssignFollowResponse, FollowId>(
+      API.post<AssignFollowResponse, FollowId>(
         API_ENDPOINTS.FOLLOW.ASSIGN_FOLLOW(userId),
       ),
     onMutate: async (userId) => {

src/hooks/apis/Follow/useDeleteFollowMutation.ts

@@ -1,16 +1,19 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { DELETE } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
-import { DeleteFollowResponse, UserProfileResponse } from '@/types/response';
-import { notify } from '@/store/useToastStore';
 import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
+import { DeleteFollowResponse, UserProfileResponse } from '@/types/response';
 
 export const useDeleteFollowMutation = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (userId: number) =>
-      DELETE<DeleteFollowResponse>(API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId)),
+      API.delete<DeleteFollowResponse>(
+        API_ENDPOINTS.FOLLOW.DELETE_FOLLOW(userId),
+      ),
     onMutate: async (userId) => {
       const previousData = queryClient.getQueriesData<UserProfileResponse>({
         queryKey: [QUERY_KEYS.USER_PROFILE, userId],

src/hooks/apis/Follows/useDeleteFollowsQuery.ts

@@ -1,17 +1,20 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import { notify } from '@/store/useToastStore';
-import { DeleteFollowsResponse } from '@/types/Follows';
-import { DELETE } from '@/apis/services/httpMethod';
+
+import { API } from '@/apis/services/httpMethod';
 import { API_ENDPOINTS } from '@/constants/ApiEndpoints';
-import { QUERY_KEYS } from '@/constants/QueryKeys';
 import { TOAST_MESSAGES } from '@/constants/Messages';
+import { QUERY_KEYS } from '@/constants/QueryKeys';
+import { notify } from '@/store/useToastStore';
+import { DeleteFollowsResponse } from '@/types/Follows';
 
 export const useDeleteFollow = () => {
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: (followerId: number) =>
-      DELETE<DeleteFollowsResponse>(API_ENDPOINTS.FOLLOW.DELETE(followerId)),
+      API.delete<DeleteFollowsResponse>(
+        API_ENDPOINTS.FOLLOW.DELETE(followerId),
+      ),
     onSuccess: () => {
       queryClient.invalidateQueries({ queryKey: [QUERY_KEYS.FOLLOW_COUNT] });
       notify('success', TOAST_MESSAGES.DELETE_FOLLOW_SUCCESS, 3000);