refactor(fe): improve readability (#36)

* feat: replace .eslintrc.json with eslint.config.js

* fix: update TypeScript configuration and ESLint settings

* fix: remove unnecessary eslint-disable comments and improve clipboard copy handling

* fix: enhance ESLint rules for React components and improve code complexity checks

* fix: add eslint-plugin-react-hooks and update ESLint rules for hooks

* fix: update lint script to run ESLint in quiet mode

* fix: add React version detection to ESLint configuration

* fix: refactor layout structure in multiple components for improved readability

* refactor: restructure modal components to use Header, Body, and Footer for improved organization

* chore: auto-fix linting and formatting issues

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: cjeongmin

apps/client/.eslintrc.json

@@ -0,0 +1,104 @@
+import pluginJs from '@eslint/js';
+import prettier from 'eslint-config-prettier';
+import pluginImport from 'eslint-plugin-import';
+import pluginReact from 'eslint-plugin-react';
+import pluginReactHooks from 'eslint-plugin-react-hooks'; // 추가
+import globals from 'globals';
+import tseslint from 'typescript-eslint';
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  { files: ['**/*.{ts,tsx}'] },
+  {
+    ignores: [
+      'postcss.config.js',
+      'tailwind.config.js',
+      'vite.config.ts',
+      'vite-env.d.ts',
+      'routeTree.gen.ts',
+      'playwright.config.ts',
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: './tsconfig.app.json',
+        ecmaVersion: 2020,
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+      globals: globals.browser,
+    },
+  },
+  {
+    plugins: {
+      import: pluginImport,
+      'react-hooks': pluginReactHooks,
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-boolean-value': ['error', 'always'],
+      'react/jsx-no-duplicate-props': ['error'],
+      'react/jsx-no-undef': ['error'],
+      'react/jsx-max-depth': ['error', { max: 4 }],
+
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+
+      complexity: ['error', { max: 10 }],
+      'max-depth': ['error', 3],
+      'max-lines-per-function': ['error', { max: 30, skipBlankLines: true, skipComments: true }],
+
+      'import/extensions': 'off',
+      'import/order': [
+        'error',
+        {
+          groups: ['builtin', 'external', ['parent', 'sibling'], 'index'],
+          pathGroups: [
+            {
+              pattern: '@/component/**',
+              group: 'parent',
+              position: 'before',
+            },
+            {
+              pattern: '@/features/**',
+              group: 'parent',
+              position: 'before',
+            },
+          ],
+          named: true,
+          alphabetize: {
+            order: 'asc',
+            caseInsensitive: true,
+          },
+          'newlines-between': 'always',
+        },
+      ],
+      'sort-imports': [
+        'error',
+        {
+          ignoreCase: true,
+          ignoreDeclarationSort: true,
+          ignoreMemberSort: true,
+          memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single'],
+          allowSeparatedGroups: true,
+        },
+      ],
+    },
+  },
+  {
+    ignores: ['**.spec.ts'],
+    rules: {
+      'max-lines-per-function': 'off',
+    },
+  },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  pluginReact.configs.flat['jsx-runtime'],
+  prettier,
+];

apps/client/eslint.config.js

@@ -6,7 +6,7 @@
   "scripts": {
     "dev": "vite --host",
     "build": "tsc -b && vite build",
-    "lint": "eslint . --fix",
+    "lint": "eslint . --fix --ignore-pattern 'dist' --quiet",
     "format": "prettier --write .",
     "preview": "vite preview",
     "test": "pnpm exec playwright test",
@@ -30,10 +30,9 @@
     "zustand": "^5.0.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.11.1",
+    "@eslint/js": "^9.18.0",
     "@playwright/test": "^1.49.0",
     "@tailwindcss/typography": "^0.5.15",
-    "@tanstack/eslint-plugin-query": "^5.59.7",
     "@tanstack/router-devtools": "^1.78.3",
     "@tanstack/router-plugin": "^1.78.3",
     "@types/node": "^20.3.1",
@@ -44,22 +43,18 @@
     "@vitejs/plugin-react": "^4.3.2",
     "autoprefixer": "^10.4.20",
     "eslint": "^8.57.1",
-    "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^18.0.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-react": "^7.37.1",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.12",
-    "globals": "^15.9.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
     "postcss": "^8.4.47",
     "prettier": "3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.8",
     "rollup-plugin-visualizer": "^5.14.0",
     "tailwindcss": "^3.4.14",
     "typescript": "^5.5.3",
-    "typescript-eslint": "^8.7.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^5.4.8"
   }
 }

apps/client/package.json

@@ -37,29 +37,27 @@ function Header() {
       .catch(console.error);
 
   return (
-    <>
-      <div className='h-16 w-full bg-white px-4 py-4 shadow'>
-        <div className='mx-auto flex h-full w-full max-w-[1194px] items-center justify-between px-4'>
-          <Link to='/' className='font-header text-2xl'>
-            <span className='text-indigo-600'>A</span>
-            <span className='text-black'>sk-It</span>
-          </Link>
-          <div className='flex items-center justify-center gap-2.5'>
-            <Button
-              className='hover:bg-gray-200 hover:text-white hover:transition-all'
-              onClick={isLogin ? handleLogout : openSignInModal}
-            >
-              <p className='text-base font-bold text-black'>{isLogin ? '로그아웃' : '로그인'}</p>
-            </Button>
-            <Button className='bg-indigo-600' onClick={isLogin ? () => navigate({ to: '/my' }) : openSignUpModal}>
-              <p className='text-base font-bold text-white'>{isLogin ? '세션 기록' : '회원가입'}</p>
-            </Button>
-          </div>
+    <div className='h-16 w-full bg-white px-4 py-4 shadow'>
+      <div className='mx-auto flex h-full w-full max-w-[1194px] items-center justify-between px-4'>
+        <Link to='/' className='font-header text-2xl'>
+          <span className='text-indigo-600'>A</span>
+          <span className='text-black'>sk-It</span>
+        </Link>
+        <div className='flex items-center justify-center gap-2.5'>
+          <Button
+            className='hover:bg-gray-200 hover:text-white hover:transition-all'
+            onClick={isLogin ? handleLogout : openSignInModal}
+          >
+            <p className='text-base font-bold text-black'>{isLogin ? '로그아웃' : '로그인'}</p>
+          </Button>
+          <Button className='bg-indigo-600' onClick={isLogin ? () => navigate({ to: '/my' }) : openSignUpModal}>
+            <p className='text-base font-bold text-white'>{isLogin ? '세션 기록' : '회원가입'}</p>
+          </Button>
         </div>
       </div>
       {SignUp}
       {SignIn}
-    </>
+    </div>
   );
 }