chore: eslint migration

.github/workflows/ci.yml

@@ -129,8 +129,9 @@ jobs:
         with:
           install: 'no'
 
-      - name: Install dev dependencies
-        run: pnpm install --dev
+      # NOTE: eslint-config-next 에서 next 모듈을 찾지 못하는 에러를 해결하기 위해 프론트엔드 의존성을 설치합니다.
+      - name: Install root and frontend dependencies
+        run: pnpm install -w --filter frontend
 
       - name: Set up Go
         uses: actions/setup-go@v5

apps/frontend/app/(client)/(code-editor)/_components/EditorLayout.tsx

@@ -40,7 +40,7 @@ export default async function EditorLayout({
     problem = { ...contestProblem.problem, order: contestProblem.order }
 
     contest = await fetcher(`contest/${contestId}`).json()
-    contest ? (contest.status = 'ongoing') : null // TODO: refactor this after change status interactively
+    contest && (contest.status = 'ongoing') // TODO: refactor this after change status interactively
   } else {
     problem = await fetcher(`problem/${problemId}`).json()
   }

apps/frontend/codegen.ts

@@ -6,7 +6,6 @@ const config: CodegenConfig = {
   // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
   documents: ['./**/*.{ts,tsx}'],
   generates: {
-    // eslint-disable-next-line @typescript-eslint/naming-convention
     './__generated__/': {
       preset: 'client',
       plugins: [],

apps/frontend/components/shadcn/calendar.tsx

@@ -60,10 +60,8 @@ export const Calendar = ({
         ...classNames
       }}
       components={{
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        IconLeft: ({ ...props }) => <ChevronLeftIcon className="h-4 w-4" />,
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
-        IconRight: ({ ...props }) => <ChevronRightIcon className="h-4 w-4" />
+        IconLeft: () => <ChevronLeftIcon className="h-4 w-4" />,
+        IconRight: () => <ChevronRightIcon className="h-4 w-4" />
       }}
       {...props}
     />

apps/frontend/graphql/notice/queries.ts

@@ -1,4 +1,4 @@
-import { gql } from '@apollo/client'
+import { gql } from '@generated'
 
 const GET_NOTICE = gql(`
   query GetNotice($groupId: Int!, $noticeId: Int!) {

apps/frontend/next.config.js

@@ -1,6 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withSentryConfig } = require('@sentry/nextjs')
-// eslint-disable-next-line @typescript-eslint/no-var-requires
 const withBundleAnalyzer = require('@next/bundle-analyzer')({
   enabled: process.env.ANALYZE === 'true'
 })

apps/frontend/package.json

@@ -6,7 +6,7 @@
     "dev": "next dev -p 5525",
     "build": "pnpm run compile && next build",
     "start": "next start --keepAliveTimeout 70000",
-    "lint": "next lint",
+    "lint": "eslint .",
     "compile": "graphql-codegen --require dotenv/config",
     "test": "vitest"
   },
@@ -106,7 +106,6 @@
     "autoprefixer": "^10.4.20",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "eslint-config-next": "^14.2.22",
     "jsdom": "^25.0.1",
     "lucide-react": "^0.469.0",
     "msw": "^2.7.0",

apps/frontend/tailwind.config.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/naming-convention */
 import typography from '@tailwindcss/typography'
 import type { Config } from 'tailwindcss'
 import animate from 'tailwindcss-animate'

apps/frontend/vitest.config.ts

@@ -8,9 +8,7 @@ export default defineConfig({
     globals: true,
     setupFiles: ['./vitest.setup.ts'],
     env: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       NEXT_PUBLIC_BASEURL: 'https://test.com/api',
-      // eslint-disable-next-line @typescript-eslint/naming-convention
       NEXTAUTH_URL: 'https://test.com/next-auth/api/auth'
     }
   },

eslint.config.mjs

@@ -0,0 +1,182 @@
+import { FlatCompat } from '@eslint/eslintrc'
+import eslintJS from '@eslint/js'
+import eslintPluginPrettier from 'eslint-plugin-prettier/recommended'
+import globals from 'globals'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import eslintTS from 'typescript-eslint'
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const flatCompat = new FlatCompat({
+  baseDirectory: __dirname
+})
+
+export default eslintTS.config(
+  {
+    ignores: [
+      '**/dist',
+      '**/node_modules',
+      '**/.pnpm-store',
+      '**/__generated__',
+      '**/@generated',
+      '**/collection',
+      '**/.next',
+      '**/codegen.ts',
+      '**/*.config.{js,mjs,ts}'
+    ]
+  },
+
+  /* Common configuration */
+  eslintPluginPrettier,
+  eslintJS.configs.recommended,
+  ...eslintTS.configs.recommended,
+  {
+    plugins: {
+      '@typescript-eslint': eslintTS.plugin
+    },
+    languageOptions: {
+      parser: eslintTS.parser,
+      parserOptions: {
+        project: true,
+        emitDecoratorMetadata: true,
+        ecmaFeatures: {
+          jsx: true
+        }
+      },
+      globals: {
+        ...globals.node
+      }
+    },
+    rules: {
+      'object-shorthand': ['warn', 'always'],
+      '@typescript-eslint/no-unused-vars': 'warn',
+      '@typescript-eslint/no-inferrable-types': 'warn',
+      '@typescript-eslint/consistent-type-imports': 'warn',
+      '@typescript-eslint/no-import-type-side-effects': 'error'
+    }
+  },
+  {
+    files: ['**/*.ts'],
+    rules: {
+      '@typescript-eslint/naming-convention': [
+        'error',
+        {
+          selector: 'default',
+          format: ['camelCase'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow'
+        },
+        {
+          selector: 'import',
+          format: ['camelCase', 'PascalCase']
+        },
+        {
+          selector: 'typeLike',
+          format: ['PascalCase']
+        },
+        {
+          selector: 'variable',
+          format: ['camelCase', 'UPPER_CASE', 'PascalCase'],
+          leadingUnderscore: 'allow',
+          trailingUnderscore: 'allow'
+        },
+        {
+          selector: ['objectLiteralProperty', 'classProperty'],
+          format: ['camelCase', 'PascalCase']
+        }
+      ]
+    }
+  },
+
+  /* Backend configuration */
+  {
+    files: ['apps/backend/**/*'],
+    rules: {
+      'func-style': ['error', 'expression'],
+      'no-restricted-imports': [
+        'error',
+        {
+          patterns: [
+            {
+              group: ['apps/*', 'libs/*'],
+              message:
+                'Please import with path alias like `@apps/*` or `@libs/*`'
+            }
+          ]
+        }
+      ]
+    }
+  },
+  {
+    files: ['apps/backend/**/*.spec.ts'],
+    languageOptions: {
+      globals: {
+        ...globals.mocha
+      }
+    },
+    rules: {
+      '@typescript-eslint/no-unused-expressions': 'off'
+    }
+  },
+
+  /* Frontend configuration */
+  ...flatCompat
+    .config({
+      extends: ['next/core-web-vitals']
+    })
+    .map((config) => ({
+      ...config,
+      files: ['apps/frontend/**/*']
+    })),
+  {
+    files: ['apps/frontend/**/*'],
+    languageOptions: {
+      globals: {
+        ...globals.browser
+      }
+    },
+    rules: {
+      '@next/next/no-html-link-for-pages': [
+        'error',
+        path.join(__dirname, 'apps/frontend/app')
+      ],
+      'no-restricted-imports': [
+        'error',
+        {
+          name: '@apollo/client',
+          importNames: ['gql'],
+          message: 'Please use @generated instead.'
+        },
+        {
+          name: '@/__generated__',
+          message: 'Please use @generated instead.'
+        },
+        {
+          name: '@/__generated__/graphql',
+          message: 'Please use @generated/graphql instead.'
+        }
+      ],
+      '@typescript-eslint/no-empty-object-type': [
+        'error',
+        { allowInterfaces: 'with-single-extends' }
+      ],
+      '@typescript-eslint/no-unused-expressions': [
+        'error',
+        { allowShortCircuit: true, allowTernary: true }
+      ]
+    }
+  },
+  {
+    files: ['apps/frontend/**/*.tsx'],
+    ignores: ['apps/frontend/components/shadcn/*.tsx'],
+    rules: {
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'function-declaration'
+        }
+      ]
+    }
+  }
+)