⚙️ Eslint & Husky+lint-staged 설정

.eslintrc.cjs

@@ -12,12 +12,62 @@ module.exports = {
   ],
   ignorePatterns: ['dist', '.eslintrc.cjs'],
   parser: '@typescript-eslint/parser',
-  plugins: ['react-refresh', '@tanstack/query'],
+  plugins: [
+    'react-refresh',
+    '@tanstack/query',
+    'fsd-import',
+    'import',
+    'react',
+  ],
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [['@', '@public', './src']],
+        extensions: ['.ts', '.tsx', '.js', '.jsx', '.json'],
+      },
+    },
+  },
   rules: {
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },
     ],
+    'no-var': 'error',
+    'no-multiple-empty-lines': 'error',
+    'no-console': ['error', { allow: ['warn', 'error', 'info'] }],
+    eqeqeq: 'error',
+    'dot-notation': 'error',
+    'no-unused-vars': 'error',
+    'react/jsx-no-useless-fragment': 'error',
+    'react/react-in-jsx-scope': 'off',
+    'import/order': [
+      'error',
+      {
+        groups: ['builtin', 'external', 'parent', 'sibling', 'index'],
+        pathGroups: [
+          {
+            pattern: 'react',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: 'react-router-dom',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@/**/*',
+            group: 'parent',
+            position: 'before',
+          },
+        ],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
   },
   globals: {
     ...vitest.environments.env.globals,

.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+echo "🐶 Running lint-staged..."
+yarn lint-front

package.json

@@ -8,7 +8,9 @@
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "vitest --passWithNoTests"
+    "test": "vitest --passWithNoTests",
+    "postinstall": "husky",
+    "lint-front": "lint-staged"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.25.0",
@@ -32,10 +34,16 @@
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-import-resolver-alias": "^1.1.2",
+    "eslint-plugin-fsd-import": "^0.0.12",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-react": "^7.34.1",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-vitest": "^0.4.1",
+    "husky": "^8.0.0",
     "jsdom": "^24.0.0",
+    "lint-staged": "^15.2.2",
     "msw": "^2.2.13",
     "prettier": "^3.2.5",
     "sass": "1.71.1",
@@ -47,5 +55,9 @@
     "workerDirectory": [
       "public"
     ]
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx}": "eslint --fix",
+    "*.{js,jsx,ts,tsx,css,md}": "prettier --write"
   }
 }

src/app/App.tsx

@@ -1,6 +1,7 @@
-import { RouterProvider } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import { RouterProvider } from 'react-router-dom';
+
 import { queryClient } from './providers/query-client';
 import { router } from './routers/index';
 

src/app/layout/RootLayout.tsx

@@ -1,4 +1,5 @@
 import { Outlet } from 'react-router-dom';
+
 import FNB from '@/shared/ui/FNB/FNB';
 
 export default function RootLayout() {

src/app/routers/index.tsx

@@ -1,4 +1,5 @@
 import { createBrowserRouter, RouteObject } from 'react-router-dom';
+
 import RootLayout from '../layout/RootLayout.tsx';
 
 const root: RouteObject[] = [

src/main.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+
 import App from './app/App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

src/setupTest.ts

@@ -1,13 +1,12 @@
 import '@testing-library/jest-dom/vitest';
 import * as matchers from '@testing-library/jest-dom/matchers';
+// 테스트용 Mocking 서버 설정
+import { setupServer } from 'msw/node';
 import { beforeAll, afterAll, afterEach, expect } from 'vitest';
 
 // jest-dom의 matchers를 vitest 테스트 환경에 추가
 expect.extend(matchers);
 
-// 테스트용 Mocking 서버 설정
-import { setupServer } from 'msw/node';
-
 export const server = setupServer();
 
 beforeAll(() => server.listen({ onUnhandledRequest: 'error' }));

src/shared/mocks/browser.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 import { setupWorker } from 'msw/browser';
 
 // 브라우저에서 실행하기 위한 mocking worker 초기화

src/shared/tests/setup.tsx

@@ -1,6 +1,6 @@
-import { ReactElement } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { render as testRender } from '@testing-library/react';
+import { ReactElement } from 'react';
 import { MemoryRouter } from 'react-router-dom';
 
 function customRender(children: ReactElement, baseEntries?: string[]) {

vite.config.ts

@@ -1,6 +1,7 @@
-import { defineConfig } from 'vitest/config';
 import path from 'path';
+
 import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vitest/config';
 
 // https://vitejs.dev/config/
 export default defineConfig({