[4팀 김지혜] Chapter 2-3. 관심사 분리와 폴더구조

.github/workflows/deploy.yml

@@ -0,0 +1,55 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    if: github.event_name == 'push'
+    runs-on: ubuntu-latest
+    concurrency:
+      group: pages-deploy-${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+      - name: Enable corepack (ensure pnpm shim)
+        run: corepack enable
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8
+          run_install: false
+
+      - name: Install dependencies
+        run: pnpm install --no-frozen-lockfile
+
+      - name: Build
+        run: pnpm run build
+
+      - name: Add 404.html (SPA fallback)
+        run: |
+          if [ -f "dist/index.html" ]; then
+            cp dist/index.html dist/404.html
+            echo "Added 404.html for SPA routing"
+          fi
+
+      - name: Deploy to GitHub Pages
+        uses: peaceiris/actions-gh-pages@v3
+        with:
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: ./dist
+          force_orphan: true
+          publish_branch: gh-pages

.prettierignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+build
+coverage
+*.log
+pnpm-lock.yaml
+package-lock.json
+yarn.lock 

.prettierrc

@@ -1,9 +1,11 @@
 {
-  "semi": false,
-  "printWidth": 120,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
   "tabWidth": 2,
-  "singleQuote": false,
-  "quoteProps": "consistent",
-  "trailingComma": "all",
-  "singleAttributePerLine": false
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always",
+  "printWidth": 100,
+  "endOfLine": "auto"
 }

eslint.config.js

@@ -1,28 +1,130 @@
-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'
-
-export default tseslint.config(
-  { ignores: ['dist'] },
+import typescript from "@typescript-eslint/eslint-plugin"
+import typescriptParser from "@typescript-eslint/parser"
+import { defineConfig } from "eslint/config"
+import prettier from "eslint-config-prettier"
+import compat from "eslint-plugin-compat"
+import importPlugin from "eslint-plugin-import"
+import eslintPluginPrettier from "eslint-plugin-prettier"
+import react from "eslint-plugin-react"
+import reactHooks from "eslint-plugin-react-hooks"
+import reactRefresh from "eslint-plugin-react-refresh"
+
+export default defineConfig([
+  {
+    ignores: ["**/node_modules/**", "dist/**", ".eslintrc.cjs"],
+  },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommended],
-    files: ['**/*.{ts,tsx}'],
+    files: ["**/*.{js,jsx,ts,tsx}"],
     languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
+      ecmaVersion: "latest",
+      sourceType: "module",
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        tsconfigRootDir: ".",
+      },
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
+      "prettier": eslintPluginPrettier,
+      react,
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      "@typescript-eslint": typescript,
+      compat,
+      "import": importPlugin,
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+      browsers: "> 0.5%, last 2 versions, not op_mini all, Firefox ESR, not dead",
     },
     rules: {
-      ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
-        { allowConstantExport: true },
+      // 기존 규칙 유지
+      "react-refresh/only-export-components": ["warn", { allowConstantExport: true }],
+
+      // Prettier 통합 규칙
+      "comma-dangle": [
+        "error",
+        {
+          arrays: "always-multiline",
+          objects: "always-multiline",
+          imports: "always-multiline",
+          exports: "always-multiline",
+          functions: "never",
+        },
+      ],
+
+      // React 관련 규칙
+      "react/prop-types": "off",
+      "react/react-in-jsx-scope": "off",
+      "react-hooks/rules-of-hooks": "error",
+
+      // TypeScript 관련 규칙
+      "@typescript-eslint/no-explicit-any": "warn",
+
+      // 팀 컨벤션 - var 사용 금지
+      "no-var": "error",
+      "@typescript-eslint/no-unused-vars": "error",
+
+      // 팀 컨벤션 - 동등 연산자 (==, !=) 금지
+      "eqeqeq": ["error", "always", { null: "ignore" }],
+
+      // 팀 컨벤션 - 얼리 리턴 권장
+      "consistent-return": "error",
+      "no-else-return": ["error", { allowElseIf: false }],
+
+      // 팀 컨벤션 - 템플릿 리터럴 규칙
+      "prefer-template": "error",
+
+      // 팀 컨벤션 - 상수는 대문자
+      "camelcase": [
+        "error",
+        {
+          properties: "never",
+          ignoreDestructuring: false,
+          ignoreImports: false,
+          ignoreGlobals: false,
+          allow: ["^[A-Z][A-Z0-9_]*$"],
+        },
+      ],
+
+      // 팀 컨벤션 - 구조분해할당 권장
+      "prefer-destructuring": [
+        "error",
+        {
+          array: true,
+          object: true,
+        },
+        {
+          enforceForRenamedProperties: false,
+        },
+      ],
+
+      // 기본 코드 품질 규칙
+      "prefer-const": "error",
+      "object-shorthand": "error",
+      "no-multiple-empty-lines": ["error", { max: 1, maxEOF: 0 }],
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "no-debugger": "warn",
+      "no-undef": "off",
+
+      // import 순서 규칙
+      "import/order": [
+        "error",
+        {
+          "groups": ["builtin", "external", ["parent", "sibling"], "index"],
+          "alphabetize": {
+            order: "asc",
+            caseInsensitive: true,
+          },
+          "newlines-between": "always",
+        },
       ],
+      "import/extensions": "off",
     },
   },
-)
+  prettier,
+])

package.json

@@ -12,16 +12,20 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.0",
     "react": "^19.1.1",
-    "react-dom": "^19.1.1"
+    "react-dom": "^19.1.1",
+    "zustand": "^5.0.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.33.0",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-select": "^2.2.5",
+    "@tanstack/react-query-devtools": "^5.85.3",
     "@testing-library/jest-dom": "^6.6.4",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^24.2.1",
     "@types/react": "^19.1.9",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react": "^5.0.0",