feat: Chrry-pick #11

.eslintignore

@@ -0,0 +1 @@
+src/shared/mocks/*

.eslintrc.cjs

@@ -12,12 +12,65 @@ 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',
+    'fsd-import/fsd-relative-path': 'error',
+    'fsd-import/public-api-imports': 'error',
+    'fsd-import/layer-imports': 'error',
+    '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

README.md

@@ -73,9 +73,9 @@
 
 > 💡 FSD Architecture를 커스텀하여 사용합니다.
 
-- widgets, features, entities 3단계를 통합해 components단계로 설정하였습니다.
+- widgets, features, entities 3단계를 통합해 features단계로 설정하였습니다.
 <div align="center">
-  <img src="https://github.com/Legitgoons/Legitgoons/assets/101088491/99d1490e-7066-41cf-8f8a-70326627ea1f" width="600">
+  <img src="https://github.com/CollaBu/pennyway-client-webview/assets/101088491/9f247ff1-9fe3-4d84-98e5-de1ebfa70180" width="600">
 </div>
 <br/>
 

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,4 +1,5 @@
 import ReactDOM from 'react-dom/client';
+
 import App from './app/App';
 
 async function enableMocking() {

src/setupTest.ts

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

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({