Merge branch 'develop-FE' into fix/#472-permission

woowacourse-teams · Sep 21, 2023 · be5ad68 · be5ad68
2 parents 3107246 + 94ab841
commit be5ad68
Show file tree

Hide file tree

Showing 11 changed files with 343 additions and 387 deletions.
diff --git a/frontend/babel.config.js b/frontend/babel.config.js
@@ -6,6 +6,7 @@ module.exports = {
         targets: {
           browsers: ['last 2 versions', 'not dead', 'not ie <= 11'],
         },
+        modules: false,
       },
     ],
     ['@babel/preset-react'],

diff --git a/frontend/src/apis/deleteApi.ts b/frontend/src/apis/deleteApi.ts
@@ -1,39 +1,35 @@
-// const API_URL =
-//   process.env.NODE_ENV === 'production'
-//     ? process.env.REACT_APP_API_DEFAULT_PROD
-//     : process.env.REACT_APP_API_DEFAULT_DEV;
-
-const API_URL = process.env.NODE_ENV === 'development' ? 'http://localhost:3000' : DEFAULT_PROD_URL
-
 import { DEFAULT_PROD_URL } from '../constants';
 import { ContentTypeType } from '../types/Api';
+import withTokenRefresh from './utils';
 
 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,
+  return await withTokenRefresh(async () => {
+    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,
+    });
+
+    if (response.status >= 400) {
+      throw new Error('[SERVER] DELETE 요청에 실패했습니다.');
+    }
   });
-
-  if (response.status >= 400) {
-    throw new Error('[SERVER] DELETE 요청에 실패했습니다.');
-  }
 };
diff --git a/frontend/src/apis/getApi.ts b/frontend/src/apis/getApi.ts
@@ -1,98 +1,5 @@
-let refreshResponse: Promise<Response> | null = null;
-
-const decodeToken = (token: string) => {
-  const tokenParts = token.split('.');
-  if (tokenParts.length !== 3) {
-    throw new Error('토큰이 잘못되었습니다.');
-  }
-
-  const decodedPayloadString = atob(tokenParts[1]);
-
-  return JSON.parse(decodedPayloadString);
-};
-
-async function refreshToken(headers: Headers): Promise<Response> {
-  if (refreshResponse !== null) {
-    console.log('if 블록 내부에서 refreshResponse : ', refreshResponse);
-    return refreshResponse;
-  }
-
-  console.log('refreshResponse:', refreshResponse);
-
-  const accessToken = localStorage.getItem('userToken');
-  try {
-    // 서버에 새로운 엑세스 토큰을 요청하기 위한 네트워크 요청을 보냅니다.
-    refreshResponse = fetch(`${DEFAULT_PROD_URL}/refresh-token`, {
-      method: 'POST',
-      headers,
-      body: JSON.stringify({
-        accessToken: accessToken,
-      }),
-    });
-
-    const responseData = await refreshResponse;
-    refreshResponse = null;
-
-    // 서버 응답이 성공적인지 확인합니다.
-    if (!responseData.ok) {
-      console.log('refreshResponse.ok하지 못함');
-      throw new Error('Failed to refresh access token.');
-    }
-
-    // 새로운 엑세스 토큰을 반환합니다.
-    return responseData;
-  } catch (error) {
-    // 네트워크 요청 실패 또는 예외 발생 시 예외를 캐치하여 처리합니다.
-    console.error('네트워크 요청 실패 또는 예외 발생:', error);
-    throw error; // 예외를 다시 throw하여 상위 코드로 전파합니다.
-  }
-}
-
-const isTokenExpired = (token: string) => {
-  const decodedPayloadObject = decodeToken(token);
-  return decodedPayloadObject.exp * 1000 < Date.now();
-};
-
-async function updateToken(headers: Headers) {
-  const response = await refreshToken(headers);
-  const responseCloned = response.clone();
-
-  try {
-    const newToken = await responseCloned.json();
-
-    console.log('newToken:', newToken);
-
-    localStorage.setItem('userToken', newToken.accessToken);
-  } catch (e) {
-    console.error(e);
-
-    return;
-  }
-}
-
-async function withTokenRefresh<T>(callback: () => Promise<T>): Promise<T> {
-  const userToken = localStorage.getItem('userToken');
-
-  if (userToken && isTokenExpired(userToken)) {
-    console.log('AccessToken 만료되어 재요청합니다');
-
-    const headers: any = {
-      'content-type': 'application/json',
-      Authorization: `Bearer ${userToken}`,
-    };
-
-    await updateToken(headers);
-  }
-
-  return callback();
-}
-
 import { DEFAULT_PROD_URL } from '../constants';
-
-interface Headers {
-  'content-type': string;
-  [key: string]: string;
-}
+import withTokenRefresh from './utils';
 
 export const getApi = async <T>(url: string) => {
   return await withTokenRefresh(async () => {
@@ -106,18 +13,13 @@ export const getApi = async <T>(url: string) => {
       headers['Authorization'] = `Bearer ${userToken}`;
     }
 
-    console.log('response', DEFAULT_PROD_URL + url);
-
     const response = await fetch(apiUrl, { method: 'GET', headers });
 
-    console.log(response);
-
     if (response.status >= 400) {
       throw new Error('[SERVER] GET 요청에 실패했습니다.');
     }
 
     const responseData: T = await response.json();
-    console.log('responseData L84까지 성공', responseData);
     return responseData;
   });
 };
diff --git a/frontend/src/apis/postApi.ts b/frontend/src/apis/postApi.ts
@@ -1,64 +1,58 @@
 import { DEFAULT_PROD_URL } from '../constants';
 import { ContentTypeType } from '../types/Api';
-
-interface Headers {
-  'content-type': string;
-  [key: string]: string;
-}
-
-interface HeadersForm {
-  [key: string]: string;
-}
+import withTokenRefresh from './utils';
 
 export const postApi = async (
   url: string,
   payload: {} | FormData,
   contentType?: ContentTypeType,
 ) => {
-  const apiUrl = `${DEFAULT_PROD_URL + url}`;
-  const userToken = localStorage.getItem('userToken');
+  return await withTokenRefresh(async () => {
+    const apiUrl = `${DEFAULT_PROD_URL + url}`;
+    const userToken = localStorage.getItem('userToken');
+
+    if (payload instanceof FormData) {
+      const headers: any = {};
+
+      if (userToken) {
+        headers['Authorization'] = `Bearer ${userToken}`;
+      }
+
+      const response = await fetch(apiUrl, {
+        method: 'POST',
+        headers,
+        body: payload,
+      });
+
+      if (response.status >= 400) {
+        throw new Error('[SERVER] POST 요청에 실패했습니다.');
+      }
+
+      return response;
+    }
 
-  if (payload instanceof FormData) {
-    const headers: HeadersForm = {};
+    const headers: any = {
+      'content-type': 'application/json',
+    };
 
     if (userToken) {
       headers['Authorization'] = `Bearer ${userToken}`;
     }
 
+    if (contentType) {
+      headers['content-type'] = contentType;
+    }
+
     const response = await fetch(apiUrl, {
       method: 'POST',
       headers,
-      body: payload,
+      body: JSON.stringify(payload),
     });
 
     if (response.status >= 400) {
       throw new Error('[SERVER] POST 요청에 실패했습니다.');
     }
 
     return response;
-  }
-
-  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: 'POST',
-    headers,
-    body: JSON.stringify(payload),
   });
-
-  if (response.status >= 400) {
-    throw new Error('[SERVER] POST 요청에 실패했습니다.');
-  }
-
-  return response;
 };
diff --git a/frontend/src/apis/putApi.ts b/frontend/src/apis/putApi.ts
@@ -1,38 +1,37 @@
 import { DEFAULT_PROD_URL } from '../constants';
 import { ContentTypeType } from '../types/Api';
-interface Headers {
-  'content-type': string;
-  [key: string]: string;
-}
+import withTokenRefresh from './utils';
 
 export const putApi = async (
   url: string,
   data: {},
   contentType?: ContentTypeType,
 ) => {
-  const apiUrl = `${DEFAULT_PROD_URL + url}`;
-  const userToken = localStorage.getItem('userToken');
-  const headers: Headers = {
-    'content-type': 'application/json',
-  };
+  return await withTokenRefresh(async () => {
+    const apiUrl = `${DEFAULT_PROD_URL + url}`;
+    const userToken = localStorage.getItem('userToken');
+    const headers: any = {
+      'content-type': 'application/json',
+    };
 
-  if (userToken) {
-    headers['Authorization'] = `Bearer ${userToken}`;
-  }
+    if (userToken) {
+      headers['Authorization'] = `Bearer ${userToken}`;
+    }
 
-  if (contentType) {
-    headers['content-type'] = contentType;
-  }
+    if (contentType) {
+      headers['content-type'] = contentType;
+    }
 
-  const response = await fetch(apiUrl, {
-    method: 'PUT',
-    headers,
-    body: JSON.stringify(data),
-  });
+    const response = await fetch(apiUrl, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify(data),
+    });
 
-  if (response.status >= 400) {
-    throw new Error('[SERVER] PUT 요청에 실패했습니다.');
-  }
+    if (response.status >= 400) {
+      throw new Error('[SERVER] PUT 요청에 실패했습니다.');
+    }
 
-  return response;
+    return response;
+  });
 };