[10팀 홍혜원] Chapter 2-3. 관심사 분리와 폴더구조

.prettierrc

@@ -1,9 +1,9 @@
 {
   "semi": false,
-  "printWidth": 120,
+  "printWidth": 100,
   "tabWidth": 2,
   "singleQuote": false,
   "quoteProps": "consistent",
   "trailingComma": "all",
   "singleAttributePerLine": false
-}
+}

eslint.config.js

@@ -1,28 +1,77 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
+import js from "@eslint/js"
+import globals from "globals"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+import boundaries from "eslint-plugin-boundaries"
+import importPlugin from "eslint-plugin-import"
+import simpleImportSort from "eslint-plugin-simple-import-sort"
+import tseslint from "typescript-eslint"
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
     extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      boundaries,
+      "import": importPlugin,
+      "simple-import-sort": simpleImportSort,
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
+      ...reactHooks.configs.recommended.rules, // Hook 호출 순서 문제 방지 및 의존성 배열 문제 방지
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }], // 컴포넌트 파일은 컴포넌트만 export함
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "simple-import-sort/imports": "warn", // import 문을 정렬
+      "simple-import-sort/exports": "warn", // export 문을 정렬
+      "import/first": "error", // import 문은 파일 최상단에만 있어야 함
+      "import/no-duplicates": "error", // 같은 파일을 여러 번 import하면 에러
+
+      "no-restricted-imports": [
+        "error",
+        {
+          patterns: ["../*", "./*/../*"],
+        },
+      ],
+
+      // boundaries: FSD 레이어 강제 - 상위에서 하위 요소를 import 하는 것만 가능
+      "boundaries/element-types": [
+        "error",
+        {
+          default: "disallow",
+          rules: [
+            { from: "shared", allow: ["shared"] },
+            { from: "entities", allow: ["shared", "entities"] },
+            { from: "features", allow: ["shared", "entities", "features"] },
+            { from: "widgets", allow: ["shared", "entities", "features", "widgets"] },
+            { from: "pages", allow: ["shared", "entities", "features", "widgets", "pages"] },
+          ],
+        },
       ],
     },
+    settings: {
+      "import/resolver": {
+        node: {
+          paths: ["src"],
+          extensions: [".js", ".jsx", ".ts", ".tsx"],
+        },
+      },
+      // boundaries 플러그인 설정
+      "boundaries": {
+        defaultIgnore: ["**/*.test.ts", "**/*.test.tsx"],
+        types: [
+          { type: "shared", pattern: "src/shared/*" },
+          { type: "entities", pattern: "src/entities/*" },
+          { type: "features", pattern: "src/features/*" },
+          { type: "widgets", pattern: "src/widgets/*" },
+          { type: "pages", pattern: "src/pages/*" },
+        ],
+      },
+    },
   },
 )

package.json

@@ -12,8 +12,11 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.74.11",
+    "@tanstack/react-query-devtools": "^5.75.0",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.25.1",
@@ -22,14 +25,21 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^22.15.3",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
+    "@typescript-eslint/eslint-plugin": "^8.31.0",
+    "@typescript-eslint/parser": "^8.31.0",
     "@vitejs/plugin-react": "^4.4.1",
     "axios": "^1.9.0",
     "class-variance-authority": "^0.7.1",
     "eslint": "^9.25.1",
+    "eslint-import-resolver-typescript": "^4.3.4",
+    "eslint-plugin-boundaries": "^5.0.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
+    "eslint-plugin-simple-import-sort": "^12.1.1",
     "globals": "^16.0.0",
     "jsdom": "^26.1.0",
     "lucide-react": "^0.503.0",