[24.12.18 / TASK-55] Feature - 메인 페이지 제작

eslint.config.mjs

@@ -1,39 +1,50 @@
 import globals from 'globals';
 import pluginJs from '@eslint/js';
-import tseslint from 'typescript-eslint';
+import { configs as tseslint } from 'typescript-eslint';
 import pluginReact from 'eslint-plugin-react';
 import pluginJest from 'eslint-plugin-jest';
 import pluginJestDom from 'eslint-plugin-jest-dom';
 import pluginTest from 'eslint-plugin-testing-library';
 import pluginPrettier from 'eslint-plugin-prettier/recommended';
 import configPrettier from 'eslint-config-prettier';
+import pluginImport from 'eslint-plugin-import';
 
 /** @type {import('eslint').Linter.Config[]} */
 export default [
   { files: ['**/*.{js,mjs,cjs,ts,jsx,tsx}'] },
   { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  ...tseslint.strict,
+  ...tseslint.recommended,
   pluginJs.configs.recommended,
-  ...tseslint.configs.strict,
-  ...tseslint.configs.recommended,
   pluginReact.configs.flat.recommended,
   pluginJest.configs['flat/recommended'],
   pluginJestDom.configs['flat/recommended'],
   pluginTest.configs['flat/react'],
   pluginPrettier,
   configPrettier,
+  pluginImport.flatConfigs.recommended,
   {
     rules: {
+      'import/order': [
+        'error',
+        { groups: ['builtin', 'external', 'internal'] },
+      ],
       'react/react-in-jsx-scope': 'off',
       '@typescript-eslint/promise-function-async': 'error',
       '@typescript-eslint/consistent-type-assertions': 'error',
       '@typescript-eslint/naming-convention': 'off',
       '@typescript-eslint/no-explicit-any': 'warn',
+      'no-restricted-imports': ['error', { patterns: ['..*'] }],
     },
     languageOptions: {
-      parserOptions: {
-        project: true,
-        tsconfigRootDir: import.meta.dirname,
+      parserOptions: { project: true, tsconfigRootDir: import.meta.dirname },
+    },
+    settings: {
+      'import/resolver': {
+        typescript: true,
+        node: true,
       },
+      'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
     },
   },
 ];

next.config.mjs

@@ -2,8 +2,19 @@ import { withSentryConfig } from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: false,
+  experimental: { forceSwcTransforms: true },
+
+  webpack: (config, options) => {
+    config.module.rules.push({
+      test: /\.svg$/i,
+      use: [
+        options.defaultLoaders.babel,
+        { loader: '@svgr/webpack', options: { babel: false } },
+      ],
+    });
+    return config;
+  },
 };
-
 export default withSentryConfig(nextConfig, {
   // For all available options, see:
   // https://github.com/getsentry/sentry-webpack-plugin#options

package.json

@@ -14,9 +14,6 @@
   "dependencies": {
     "@sentry/nextjs": "^8",
     "@tanstack/react-query": "^5.61.3",
-    "@testing-library/user-event": "^14.5.2",
-    "@types/js-cookie": "^3.0.6",
-    "jest-fetch-mock": "^3.0.3",
     "js-cookie": "^3.0.5",
     "next": "14.2.18",
     "react": "^18",
@@ -27,15 +24,20 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
+    "@svgr/webpack": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.0.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/jest": "^29.5.14",
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "babel-plugin-inline-react-svg": "^2.0.2",
     "eslint": "^8.57.1",
     "eslint-config-next": "14.2.18",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jest": "^28.9.0",
     "eslint-plugin-jest-dom": "^5.5.0",
     "eslint-plugin-prettier": "^5.2.1",
@@ -44,6 +46,7 @@
     "globals": "^15.12.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-fetch-mock": "^3.0.3",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "tailwindcss": "^3.4.1",