[FE] Refactor/#365 API 요청 로직 분리 및 컴포넌트 분리

frontend/src/apiHooks/useDelete.ts

@@ -0,0 +1,32 @@
+import { deleteApi } from '../apis/deleteApi';
+import useToast from '../hooks/useToast';
+import { ContentTypeType } from '../types/Api';
+
+interface fetchDeleteProps {
+  url: string;
+  contentType?: ContentTypeType;
+}
+
+const useDelete = () => {
+  const { showToast } = useToast();
+
+  const fetchDelete = async (
+    { url, contentType }: fetchDeleteProps,
+    errorMessage: string,
+    onSuccess: () => void,
+  ) => {
+    try {
+      await deleteApi(url, contentType);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+    } catch (e) {
+      showToast('error', errorMessage);
+    }
+  };
+
+  return { fetchDelete };
+};
+
+export default useDelete;

frontend/src/apiHooks/useGet.ts

@@ -0,0 +1,23 @@
+import { getApi } from '../apis/getApi';
+import useToast from '../hooks/useToast';
+
+const useGet = () => {
+  const { showToast } = useToast();
+
+  const fetchGet = async <T>(
+    url: string,
+    errorMessage: string,
+    onSuccess: (responseData: T) => void,
+  ) => {
+    try {
+      const responseData = await getApi<T>(url);
+      onSuccess(responseData);
+    } catch (e) {
+      showToast('error', errorMessage);
+    }
+  };
+
+  return { fetchGet };
+};
+
+export default useGet;

frontend/src/apiHooks/usePost.ts

@@ -0,0 +1,35 @@
+import { postApi } from '../apis/postApi';
+import useToast from '../hooks/useToast';
+import { ContentTypeType } from '../types/Api';
+
+interface fetchPostProps {
+  url: string;
+  payload: {};
+  contentType?: ContentTypeType;
+}
+
+const usePost = () => {
+  const { showToast } = useToast();
+
+  const fetchPost = async (
+    { url, payload, contentType }: fetchPostProps,
+    errorMessage: string,
+    onSuccess?: () => void,
+  ) => {
+    try {
+      const responseData = await postApi(url, payload, contentType);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+
+      return responseData;
+    } catch (e) {
+      showToast('error', errorMessage);
+    }
+  };
+
+  return { fetchPost };
+};
+
+export default usePost;

frontend/src/apiHooks/usePut.ts

@@ -0,0 +1,35 @@
+import { putApi } from '../apis/putApi';
+import useToast from '../hooks/useToast';
+import { ContentTypeType } from '../types/Api';
+
+interface fetchPutProps {
+  url: string;
+  payload: {};
+  contentType?: ContentTypeType;
+}
+
+const usePut = () => {
+  const { showToast } = useToast();
+
+  const fetchPut = async (
+    { url, payload, contentType }: fetchPutProps,
+    errorMessage: string,
+    onSuccess?: () => void,
+  ) => {
+    try {
+      const responseData = await putApi(url, payload, contentType);
+
+      if (onSuccess) {
+        onSuccess();
+      }
+
+      return responseData;
+    } catch (e) {
+      showToast('error', errorMessage);
+    }
+  };
+
+  return { fetchPut };
+};
+
+export default usePut;

frontend/src/apis/deleteApi.ts

@@ -4,13 +4,34 @@
 //     : process.env.REACT_APP_API_DEFAULT_DEV;
 
 import { DEFAULT_PROD_URL } from '../constants';
+import { ContentTypeType } from '../types/Api';
 
-export const deleteApi = async (url: string, contentType?: string) => {
-  await fetch(`${DEFAULT_PROD_URL + url}`, {
+interface Headers {
+  'content-type': string;
+  [key: string]: string;
+}
+
+export const deleteApi = async (url: string, contentType?: ContentTypeType) => {
+  const apiUrl = `${DEFAULT_PROD_URL + url}`;
+  const userToken = localStorage.getItem('userToken');
+  const headers: Headers = {
+    'content-type': 'application/json',
+  };
+
+  if (userToken) {
+    headers['Authorization'] = `Bearer ${userToken}`;
+  }
+
+  if (contentType) {
+    headers['content-type'] = contentType;
+  }
+
+  const response = await fetch(apiUrl, {
     method: 'DELETE',
-    headers: {
-      Authorization: `Bearer ${localStorage.getItem('userToken') || ''}`,
-      'Content-Type': contentType || 'application/json',
-    },
+    headers,
   });
+
+  if (response.status >= 400) {
+    throw new Error('[SERVER] DELETE 요청에 실패했습니다.');
+  }
 };

frontend/src/apis/getApi.ts

@@ -6,31 +6,31 @@
 import { DEFAULT_PROD_URL } from '../constants';
 
 interface Headers {
-  'Content-Type': string;
+  'content-type': string;
   [key: string]: string;
 }
-export const getApi = async <T>(
-  type: 'tMap' | 'default' | 'login',
-  url: string,
-): Promise<T> => {
-  const apiUrl =
-    type === 'tMap' || type === 'login' ? url : `${DEFAULT_PROD_URL + url}`;
 
+export const getApi = async <T>(url: string) => {
+  const apiUrl = `${DEFAULT_PROD_URL + url}`;
   const userToken = localStorage.getItem('userToken');
   const headers: Headers = {
-    'Content-Type': 'application/json',
+    'content-type': 'application/json',
   };
+
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
+
   const response = await fetch(apiUrl, {
     method: 'GET',
-    headers: headers,
+    headers,
   });
-  const responseData: T = await response.json();
+
   if (response.status >= 400) {
-    //todo: status 상태별로 로그인 토큰 유효 검증
-    throw new Error('API 요청에 실패했습니다.');
+    throw new Error('[SERVER] GET 요청에 실패했습니다.');
   }
+
+  const responseData: T = await response.json();
+
   return responseData;
 };

frontend/src/apis/getLoginApi.ts

@@ -0,0 +1,16 @@
+export const getLoginApi = async <T>(url: string) => {
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      'content-type': 'application/json',
+    },
+  });
+
+  if (response.status >= 400) {
+    throw new Error('[KAKAO] GET 요청에 실패했습니다.');
+  }
+
+  const responseData: T = await response.json();
+
+  return responseData;
+};

frontend/src/apis/getMapApi.ts

@@ -1,13 +1,16 @@
-export const getMapApi = (url: string) =>
-  fetch(url, {
+export const getMapApi = async <T>(url: string) => {
+  const response = await fetch(url, {
     method: 'GET',
     headers: {
-      'Content-type': 'application/json',
+      'content-type': 'application/json',
     },
-  })
-    .then((data) => {
-      return data.json();
-    })
-    .catch((error) => {
-      throw new Error(`${error.message}`);
-    });
+  });
+
+  if (response.status >= 400) {
+    throw new Error('[MAP] GET 요청에 실패했습니다.');
+  }
+
+  const responseData: T = await response.json();
+
+  return responseData;
+};

frontend/src/apis/postApi.ts

@@ -4,28 +4,41 @@
 //     : process.env.REACT_APP_API_DEFAULT_DEV;
 
 import { DEFAULT_PROD_URL } from '../constants';
+import { ContentTypeType } from '../types/Api';
 
 interface Headers {
-  'Content-Type': string;
+  'content-type': string;
   [key: string]: string;
 }
-export const postApi = async (url: string, data?: {}, contentType?: string) => {
+
+export const postApi = async (
+  url: string,
+  payload: {},
+  contentType?: ContentTypeType,
+) => {
+  const apiUrl = `${DEFAULT_PROD_URL + url}`;
   const userToken = localStorage.getItem('userToken');
   const headers: Headers = {
-    'Content-Type': `${contentType || 'application/json'}`,
+    'content-type': 'application/json',
   };
+
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
 
-  const response = await fetch(`${DEFAULT_PROD_URL + url}`, {
+  if (contentType) {
+    headers['content-type'] = contentType;
+  }
+
+  const response = await fetch(apiUrl, {
     method: 'POST',
-    headers: headers,
-    body: JSON.stringify(data),
+    headers,
+    body: JSON.stringify(payload),
   });
+
   if (response.status >= 400) {
-    //todo: status 상태별로 로그인 토큰 유효 검증
-    throw new Error('API 요청에 실패했습니다.');
+    throw new Error('[SERVER] POST 요청에 실패했습니다.');
   }
+
   return response;
 };

frontend/src/apis/putApi.ts

@@ -4,30 +4,41 @@
 //     : process.env.REACT_APP_API_DEFAULT_DEV;
 
 import { DEFAULT_PROD_URL } from '../constants';
+import { ContentTypeType } from '../types/Api';
 
 interface Headers {
-  'Content-Type': string;
+  'content-type': string;
   [key: string]: string;
 }
+
 export const putApi = async (
   url: string,
-  data: { name: string; images: string[]; description: string },
+  data: {},
+  contentType?: ContentTypeType,
 ) => {
+  const apiUrl = `${DEFAULT_PROD_URL + url}`;
   const userToken = localStorage.getItem('userToken');
   const headers: Headers = {
-    'Content-Type': 'application/json',
+    'content-type': 'application/json',
   };
+
   if (userToken) {
     headers['Authorization'] = `Bearer ${userToken}`;
   }
 
-  const response = await fetch(`${DEFAULT_PROD_URL + url}`, {
+  if (contentType) {
+    headers['content-type'] = contentType;
+  }
+
+  const response = await fetch(apiUrl, {
     method: 'PUT',
-    headers: headers,
+    headers,
     body: JSON.stringify(data),
   });
+
   if (response.status >= 400) {
-    throw new Error('API 요청에 실패했습니다.');
+    throw new Error('[SERVER] PUT 요청에 실패했습니다.');
   }
+
   return response;
 };