refactor: eslint flat config

.github/workflows/ci-workflow.yml

@@ -15,7 +15,7 @@ jobs:
         run: npm install
 
       - name: Check typescript
-        run: npm run type:check
+        run: npm run compile
 
       - name: Check eslint
         run: npm run lint

eslint.config.mjs

@@ -0,0 +1,88 @@
+import pluginJs from '@eslint/js';
+import tseslint from '@typescript-eslint/eslint-plugin';
+import parser from '@typescript-eslint/parser';
+import pluginImport from 'eslint-plugin-import';
+import pluginJsxA11y from 'eslint-plugin-jsx-a11y';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks';
+import pluginSimpleImportSort from 'eslint-plugin-simple-import-sort';
+import globals from 'globals';
+
+const commonRules = {
+  ...pluginJs.configs.recommended.rules,
+  ...tseslint.configs.recommended.rules,
+  ...pluginReact.configs.recommended.rules,
+  ...pluginImport.configs.rules,
+  ...pluginReactHooks.configs.recommended.rules,
+  ...pluginJsxA11y.configs.recommended.rules,
+  'react/jsx-uses-react': 'off',
+  'react/react-in-jsx-scope': 'off',
+  'import/no-unresolved': 'off',
+  'react/prop-types': 'off',
+  'import/no-named-as-default': 'off',
+  'import/no-named-as-default-member': 'off',
+  'jsx-a11y/label-has-associated-control': 'off',
+  eqeqeq: 'error',
+  'no-undef': 'off',
+  'no-unused-vars': 'off',
+  'simple-import-sort/imports': 'error',
+  'simple-import-sort/exports': 'error',
+};
+
+export default [
+  {
+    files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'],
+    languageOptions: {
+      globals: globals.browser,
+      parser: parser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    plugins: {
+      '@typescript-eslint': tseslint,
+      react: pluginReact,
+      'react-hooks': pluginReactHooks,
+      import: pluginImport,
+      'jsx-a11y': pluginJsxA11y,
+      'simple-import-sort': pluginSimpleImportSort,
+    },
+    rules: {
+      ...commonRules,
+    },
+  },
+  //! ts override (지우면 ts와 충돌)
+  {
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      parser: parser,
+      parserOptions: {
+        ecmaVersion: 2021,
+        sourceType: 'module',
+        project: ['./tsconfig.json'],
+      },
+    },
+    rules: {
+      ...commonRules,
+      //TODO: 추후 제거 예정 (변경 시 현재 동작에 영향이 가는 것을 고려해야함)
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/consistent-type-imports': [
+        'error',
+        {
+          prefer: 'type-imports',
+          disallowTypeAnnotations: false,
+        },
+      ],
+      'padding-line-between-statements': [
+        'error',
+        { blankLine: 'always', prev: '*', next: 'return' },
+      ],
+    },
+  },
+];

package.json

@@ -26,20 +26,26 @@
     "compile": "tsc"
   },
   "devDependencies": {
-    "@types/node": "^18.19.47",
-    "@types/react": "^18.3.4",
+    "@eslint/js": "^9.9.1",
+    "@types/node": "^22.5.1",
+    "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "@types/react-star-ratings": "^2.3.3",
+    "@typescript-eslint/eslint-plugin": "^8.3.0",
+    "@typescript-eslint/parser": "^8.3.0",
     "@vitejs/plugin-react": "^4.3.1",
-    "eslint": "^8.57.0",
-    "eslint-config-prettier": "^8.10.0",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-jsx-a11y": "^6.9.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "prettier": "^2.8.8",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
+    "globals": "^15.9.0",
+    "prettier": "^3.3.3",
     "typescript": "^4.9.5",
+    "typescript-eslint": "^8.3.0",
     "vite": "^5.4.2"
   }
 }

src/App.tsx

@@ -1,5 +1,5 @@
-import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 import { Footer, Nav, ScrollButton } from 'components';
+import RouteChangeTracker from 'components/RouteChangeTracker';
 import {
   BadGateway,
   BanReason,
@@ -20,7 +20,7 @@ import {
   Search,
   SignUp,
 } from 'pages';
-import RouteChangeTracker from 'components/RouteChangeTracker';
+import { BrowserRouter, Navigate, Route, Routes } from 'react-router-dom';
 
 const App = () => {
   return (

src/api/ApiController.ts

@@ -3,6 +3,7 @@ import axios from 'axios';
 import jwtDecode, { type JwtPayload } from 'jwt-decode';
 import { useRecoilState } from 'recoil';
 import { isLoginStorage } from 'utils/loginStorage';
+
 import { logout, refresh } from './etc';
 
 const PROXY_URL = window.location.hostname === 'localhost' ? '/api' : '/proxy';
@@ -19,6 +20,7 @@ const JwtInterceptors = () => {
     if (!token) return false;
     const tokenInfo = jwtDecode<JwtPayload>(token);
     if (tokenInfo.exp && tokenInfo.exp <= Date.now() / 1000) return false;
+
     return true;
   };
   //토큰 리프레시
@@ -29,6 +31,7 @@ const JwtInterceptors = () => {
         throw new Error(`Response status is ${res?.status}`);
       } else {
         setToken(res.data.AccessToken);
+
         return res;
       }
     } catch (error) {
@@ -57,8 +60,9 @@ const JwtInterceptors = () => {
     },
     function (error) {
       alert('해당 요청이 정상적으로 이루어지지 않았어요.\n 다시 시도해주세요.');
+
       return Promise.reject(error);
-    }
+    },
   );
 
   instance.interceptors.response.use(
@@ -69,9 +73,11 @@ const JwtInterceptors = () => {
       if (error.response.status === 502) {
         location.href = '/502';
       }
+
       return Promise.reject(error);
-    }
+    },
   );
+
   return { instance };
 };
 

src/api/Auth.ts

@@ -1,7 +1,7 @@
 import { useNavigate } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { AxiosResponseSuccess } from 'types/common';
-import {
+import type { AxiosResponseSuccess } from 'types/common';
+import type {
   FindPassword,
   ResetPassword,
   ResponseUserCheckID,
@@ -12,6 +12,7 @@ import {
   UserLoginResponse,
 } from 'types/user';
 import { removeStorage, setStorage } from 'utils/loginStorage';
+
 import { tokenState } from '../app/recoilStore';
 import JwtInterceptors from './ApiController';
 

src/api/Lecture.ts

@@ -1,8 +1,9 @@
-import { AxiosError } from 'axios';
-import { ExamPostsResponse } from 'types/exam';
+import type { AxiosError } from 'axios';
+import type { Review } from 'types/evaluate';
+import type { ExamPostsResponse } from 'types/exam';
 import type { LectureDetailItem, MainLecture } from 'types/lecture';
+
 import JwtInterceptors from './ApiController';
-import { Review } from 'types/evaluate';
 
 const Lecture = () => {
   const { instance } = JwtInterceptors();
@@ -13,6 +14,7 @@ const Lecture = () => {
       const data: MainLecture = await instance.get(
         `/lecture/all/?option=${lecture}&page=${page}&majorType=${majorType}`
       );
+
       return data;
     } catch (error) {
       const axiosError = error as AxiosError;
@@ -60,6 +62,7 @@ const Lecture = () => {
       const { data } = await instance.get<Review[]>(
         `/evaluate-posts/?lectureId=${selectId}&page=${pageParam}`
       );
+
       return {
         data,
         isLast: data.length < 10,
@@ -77,6 +80,7 @@ const Lecture = () => {
       const data: ExamPostsResponse = await instance.get(
         `/exam-posts/?lectureId=${selectId}&page=${pageParam}`
       );
+
       return {
         data,
         isLast: data.data.length < 10,

src/api/Major.ts

@@ -1,6 +1,7 @@
-import { AxiosError } from 'axios';
+import type { AxiosError } from 'axios';
+import type { VersionCheckSuccess } from 'types/common';
+
 import JwtInterceptors from './ApiController';
-import { VersionCheckSuccess } from 'types/common';
 
 const Major = () => {
   const { instance } = JwtInterceptors();
@@ -9,6 +10,7 @@ const Major = () => {
   const version = async () => {
     try {
       const res: VersionCheckSuccess = await instance.get('/suwiki/version');
+
       return res;
     } catch (error) {
       const axiosError = error as AxiosError;
@@ -20,6 +22,7 @@ const Major = () => {
   const type = async () => {
     try {
       const res = await instance.get('/suwiki/majorType');
+
       return res;
     } catch (error) {
       const axiosError = error as AxiosError;
@@ -31,6 +34,7 @@ const Major = () => {
   const searchFavorite = async () => {
     try {
       const res = await instance.get('/user/favorite-major');
+
       return res;
     } catch (error) {
       const axiosError = error as AxiosError;
@@ -42,6 +46,7 @@ const Major = () => {
   const favoriting = async (majorType: string) => {
     try {
       const res = await instance.post('/user/favorite-major', { majorType });
+
       return res;
     } catch (error) {
       const axiosError = error as AxiosError;

src/api/Notice.ts

@@ -1,13 +1,15 @@
+import type { AxiosError } from 'axios';
+
+import type { NoticeDetail, NoticeItem } from '../types/notice';
 import JwtInterceptors from './ApiController';
-import type { NoticeItem, NoticeDetail } from '../types/notice';
-import { AxiosError } from 'axios';
 
 const Notices = () => {
   const { instance } = JwtInterceptors();
   //공지사항 조회 api
   const list = async (pageParam = 1) => {
     try {
       const res = await instance.get<NoticeItem[]>(`/notice/all?page=${pageParam}`);
+
       return {
         data: res,
         nextPage: pageParam + 1,
@@ -23,12 +25,14 @@ const Notices = () => {
   const detail = async (notice: string) => {
     try {
       const res = await instance.get<NoticeDetail>(`/notice/?noticeId=${notice}`);
+
       return res;
     } catch (error) {
       const axiosError = error as AxiosError;
       alert(axiosError.message);
     }
   };
+
   return { list, detail };
 };