[FE] Refactor/eslint ESLint 추가 적용

.github/workflows/fe-merge-dev.yml

@@ -4,7 +4,7 @@ on:
   workflow_dispatch:
 
   pull_request:
-    branches: [develop-FE-2]
+    branches: [develop-FE]
     types: [closed]
     paths: frontend/**
 
@@ -23,8 +23,8 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18
-          cache: "npm"
-          cache-dependency-path: "frontend"
+          cache: 'npm'
+          cache-dependency-path: 'frontend'
 
       - name: Install npm
         run: npm install
@@ -35,7 +35,7 @@ jobs:
         working-directory: frontend
         env:
           REACT_APP_GOOGLE_ANALYTICS: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS }}
-          APP_URL: "https://mapbefine.kro.kr/api"
+          APP_URL: 'https://mapbefine.kro.kr/api'
 
       - name: upload to artifact
         uses: actions/upload-artifact@v3
@@ -66,7 +66,7 @@ jobs:
 
         uses: 8398a7/action-slack@v3
         with:
-          mention: "here"
+          mention: 'here'
           if_mention: always
           status: ${{ job.status }}
           fields: workflow,job,commit,message,ref,author,took

.github/workflows/fe-pull-request.yml

@@ -3,7 +3,7 @@ name: Frontend CI For Test Validation
 on:
   # pull request open과 reopen 시 실행한다.
   pull_request:
-    branches: [main, develop-FE-2]
+    branches: [main, develop-FE]
     paths: frontend/**
 
 defaults:

frontend/.eslintrc.js

@@ -25,6 +25,17 @@ module.exports = {
     'import/prefer-default-export': 'off',
     'no-use-before-define': 'off',
     'react/require-default-props': 'off',
+    'react/destructuring-assignment': 'off',
+    'react/jsx-no-constructed-context-values': 'off',
+    'no-restricted-globals': 'off',
+    'no-shadow': 'off',
+    'consistent-return': 'off',
+    'no-restricted-syntax': 'off',
+    'no-await-in-loop': 'off',
+    'no-param-reassign': 'off',
+    'jsx-a11y/tabindex-no-positive': 'off',
+    'react/no-array-index-key': 'off',
+    'react/jsx-no-useless-fragment': 'off',
   },
   settings: {
     'import/resolver': {

frontend/package.json

@@ -22,7 +22,8 @@
     "react-dom": "^18.2.0",
     "react-ga4": "^2.1.0",
     "react-router-dom": "^6.14.1",
-    "styled-components": "^6.0.3"
+    "styled-components": "^6.0.3",
+    "zustand": "^4.4.3"
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",

frontend/src/apiHooks/usePatch.ts

@@ -35,6 +35,8 @@ const usePatch = () => {
 
       if (isThrow) throw e;
     }
+
+    return null;
   };
 
   return { fetchPatch };

frontend/src/apiHooks/usePost.ts

@@ -35,6 +35,8 @@ const usePost = () => {
 
       if (isThrow) throw e;
     }
+
+    return null;
   };
 
   return { fetchPost };

frontend/src/apiHooks/usePut.ts

@@ -35,6 +35,8 @@ const usePut = () => {
 
       if (isThrow) throw e;
     }
+
+    return null;
   };
 
   return { fetchPut };

frontend/src/apis/deleteApi.ts

@@ -8,15 +8,15 @@ interface Headers {
 }
 
 export const deleteApi = async (url: string, contentType?: ContentTypeType) => {
-  return await withTokenRefresh(async () => {
+  const data = 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}`;
+      headers.Authorization = `Bearer ${userToken}`;
     }
 
     if (contentType) {
@@ -32,4 +32,6 @@ export const deleteApi = async (url: string, contentType?: ContentTypeType) => {
       throw new Error('[SERVER] DELETE 요청에 실패했습니다.');
     }
   });
+
+  return data;
 };

frontend/src/apis/getApi.ts

@@ -2,15 +2,15 @@ import { DEFAULT_PROD_URL } from '../constants';
 import withTokenRefresh from './utils';
 
 export const getApi = async <T>(url: string) => {
-  return await withTokenRefresh(async () => {
+  const data = 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}`;
+      headers.Authorization = `Bearer ${userToken}`;
     }
 
     const response = await fetch(apiUrl, { method: 'GET', headers });
@@ -22,4 +22,6 @@ export const getApi = async <T>(url: string) => {
     const responseData: T = await response.json();
     return responseData;
   });
+
+  return data;
 };

frontend/src/apis/patchApi.ts

@@ -4,18 +4,18 @@ import withTokenRefresh from './utils';
 
 export const patchApi = async (
   url: string,
-  data: {},
+  payload: {},
   contentType?: ContentTypeType,
 ) => {
-  return await withTokenRefresh(async () => {
+  const data = 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}`;
+      headers.Authorization = `Bearer ${userToken}`;
     }
 
     if (contentType) {
@@ -25,7 +25,7 @@ export const patchApi = async (
     const response = await fetch(apiUrl, {
       method: 'PATCH',
       headers,
-      body: JSON.stringify(data),
+      body: JSON.stringify(payload),
     });
 
     if (response.status >= 400) {
@@ -34,4 +34,6 @@ export const patchApi = async (
 
     return response;
   });
+
+  return data;
 };

frontend/src/apis/postApi.ts

@@ -7,15 +7,15 @@ export const postApi = async (
   payload?: {} | FormData,
   contentType?: ContentTypeType,
 ) => {
-  return await withTokenRefresh(async () => {
+  const data = 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}`;
+        headers.Authorization = `Bearer ${userToken}`;
       }
 
       const response = await fetch(apiUrl, {
@@ -36,7 +36,7 @@ export const postApi = async (
     };
 
     if (userToken) {
-      headers['Authorization'] = `Bearer ${userToken}`;
+      headers.Authorization = `Bearer ${userToken}`;
     }
 
     if (contentType) {
@@ -55,4 +55,6 @@ export const postApi = async (
 
     return response;
   });
+
+  return data;
 };

frontend/src/apis/putApi.ts

@@ -4,18 +4,18 @@ import withTokenRefresh from './utils';
 
 export const putApi = async (
   url: string,
-  data: {},
+  payload: {},
   contentType?: ContentTypeType,
 ) => {
-  return await withTokenRefresh(async () => {
+  const data = 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}`;
+      headers.Authorization = `Bearer ${userToken}`;
     }
 
     if (contentType) {
@@ -25,7 +25,7 @@ export const putApi = async (
     const response = await fetch(apiUrl, {
       method: 'PUT',
       headers,
-      body: JSON.stringify(data),
+      body: JSON.stringify(payload),
     });
 
     if (response.status >= 400) {
@@ -34,4 +34,6 @@ export const putApi = async (
 
     return response;
   });
+
+  return data;
 };

frontend/src/apis/utils.ts

@@ -25,7 +25,7 @@ async function refreshToken(headers: Headers): Promise<Response> {
       method: 'POST',
       headers,
       body: JSON.stringify({
-        accessToken: accessToken,
+        accessToken,
       }),
     });
 
@@ -61,8 +61,6 @@ async function updateToken(headers: Headers) {
     localStorage.setItem('userToken', newToken.accessToken);
   } catch (e) {
     console.error(e);
-
-    return;
   }
 }
 

frontend/src/context/AbsoluteModalContext.tsx

@@ -49,7 +49,7 @@ export const ModalPortal = (props: ModalPortalProps) => {
     >
       {props.children}
     </ModalContainer>,
-    $modalRoot ? $modalRoot : document.body,
+    $modalRoot || document.body,
   );
 };
 
@@ -87,7 +87,7 @@ export const useModalContext = () => {
 
 export const ModalContext = React.createContext<ModalContextType | null>(null);
 
-const ModalContextProvider = (props: { children: React.ReactNode }) => {
+function ModalContextProvider(props: { children: React.ReactNode }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   const openModal = () => {
@@ -109,6 +109,6 @@ const ModalContextProvider = (props: { children: React.ReactNode }) => {
       {props.children}
     </ModalContext.Provider>
   );
-};
+}
 
 export default ModalContextProvider;