[FE] ci: 리액트 쿼리 및 msw 설치, eslint import rule 추가 및 적용 (#44)

* ci: eslint 오류 수정 및 import rule 추가 및 관련 플러그인 설치 - eslint-config-prettier - eslint-plugin-import Co-Authored-By: badahertz52 <badahertz52@gmail.com> Co-Authored-By: ImxYJL <111052302+ImxYJL@users.noreply.github.com> Co-Authored-By: Fe <64690761+chysis@users.noreply.github.com> * style: eslint 적용으로 인한 코드 포맷팅 변경 import 순서 적용 Co-Authored-By: badahertz52 <badahertz52@gmail.com> Co-Authored-By: ImxYJL <111052302+ImxYJL@users.noreply.github.com> Co-Authored-By: Fe <64690761+chysis@users.noreply.github.com> * ci: msw 설치 Co-Authored-By: badahertz52 <badahertz52@gmail.com> Co-Authored-By: ImxYJL <111052302+ImxYJL@users.noreply.github.com> Co-Authored-By: Fe <64690761+chysis@users.noreply.github.com> --------- Co-authored-by: badahertz52 <badahertz52@gmail.com> Co-authored-by: ImxYJL <111052302+ImxYJL@users.noreply.github.com> Co-authored-by: Fe <64690761+chysis@users.noreply.github.com>
woowacourse-teams · Jul 18, 2024 · 3722245 · 3722245
1 parent c001201
commit 3722245
Show file tree

Hide file tree

Showing 7 changed files with 479 additions and 36 deletions.
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -0,0 +1,56 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:import/recommended',
+    'plugin:react/recommended',
+    'prettier',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs', 'webpack.config.js'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react/react-in-jsx-scope': 'off',
+    'react/no-unknown-property': ['error', { ignore: ['css'] }],
+    'import/order': [
+      'error',
+      {
+        'newlines-between': 'always',
+        groups: [['builtin', 'external'], 'internal', 'parent', 'sibling', 'index'],
+        pathGroups: [
+          {
+            pattern: 'next',
+            group: 'builtin',
+          },
+          {
+            pattern: 'react',
+            group: 'builtin',
+          },
+          {
+            pattern: '@MyDesignSystem/**',
+            group: 'internal',
+          },
+          {
+            pattern: 'src/**',
+            group: 'internal',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['src/**', '@MyDesignSystem/**'],
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+  },
+  settings: {
+    'import/resolver': {
+      node: {
+        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+      },
+    },
+  },
+};
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
diff --git a/frontend/package.json b/frontend/package.json
@@ -31,10 +31,13 @@
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "eslint": "^8.57.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.29.1",
     "eslint-plugin-react": "^7.34.3",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.8",
     "html-webpack-plugin": "^5.6.0",
+    "msw": "^2.3.1",
     "prettier": "^3.3.2",
     "stylelint": "^16.7.0",
     "stylelint-config-prettier": "^9.0.5",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -1,7 +1,9 @@
+import { css } from '@emotion/react';
+import React from 'react';
 import { Outlet } from 'react-router';
+
 import { Header } from './components';
 import Main from './components/Main';
-import { css } from '@emotion/react';
 import Sidebar from './components/Sidebar';
 
 const App = () => {

diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
@@ -1,6 +1,7 @@
-import * as S from './styles';
-import MenuIcon from '../../assets/menu.svg';
 import LogoIcon from '../../assets/logo.svg';
+import MenuIcon from '../../assets/menu.svg';
+
+import * as S from './styles';
 
 const Header = () => {
   return (

diff --git a/frontend/webpack.config.js b/frontend/webpack.config.js
@@ -1,6 +1,6 @@
-const path = require('path');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const path = require('path');
 
 module.exports = (env, argv) => {
   const isProduction = argv.mode === 'production';
@@ -53,7 +53,7 @@ module.exports = (env, argv) => {
     devtool: isProduction ? 'hidden-source-map' : 'eval',
     devServer: {
       historyApiFallback: true,
-      port: 3001,
+      port: 3000,
       hot: true,
     },
   };