[4팀 김소희] Chapter 2-1. 클린코드와 리팩토링

.eslintignore

@@ -0,0 +1,15 @@
+eslint.config.js
+.prettierrc.json
+
+
+node_modules
+dist
+build
+.cache
+*.lock
+
+README.md
+.github
+
+# 더티 코드 유지 
+main.original.js

.prettierrc.js

@@ -0,0 +1,11 @@
+export default {
+  semi: true,
+  singleQuote: true,
+  jsxSingleQuote: true,
+  tabWidth: 2,
+  bracketSpacing: true,
+  bracketSameLine: false,
+  arrowParens: 'always',
+  printWidth: 100,
+  endOfLine: 'auto',
+};

eslint.config.js

@@ -0,0 +1,174 @@
+import typescript from '@typescript-eslint/eslint-plugin';
+import typescriptParser from '@typescript-eslint/parser';
+import prettier from 'eslint-config-prettier';
+import compat from 'eslint-plugin-compat';
+import cypressPlugin from 'eslint-plugin-cypress';
+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 vitestPlugin from 'eslint-plugin-vitest';
+import globals from 'globals';
+
+export default [
+  {
+    ignores: ['**/node_modules/**', 'dist/**'],
+  },
+  {
+    files: ['**/*.{js,jsx,ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.browser,
+        ...globals.es2021,
+        Set: true,
+        Map: true,
+      },
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+        tsconfigRootDir: '.',
+      },
+    },
+    plugins: {
+      prettier: eslintPluginPrettier,
+      react,
+      'react-hooks': reactHooks,
+      '@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: {
+      // 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',
+      'arrow-body-style': ['error', 'as-needed'],
+      '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',
+    },
+  },
+  // 테스트 파일 설정
+  {
+    files: [
+      '**/src/**/*.{spec,test}.[jt]s?(x)',
+      '**/__mocks__/**/*.[jt]s?(x)',
+      './src/setupTests.ts',
+    ],
+    plugins: {
+      vitest: vitestPlugin,
+    },
+    rules: {
+      'vitest/expect-expect': 'off',
+    },
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        globalThis: true,
+        describe: true,
+        it: true,
+        expect: true,
+        beforeEach: true,
+        afterEach: true,
+        beforeAll: true,
+        afterAll: true,
+        vi: true,
+      },
+    },
+  },
+  // Cypress 테스트 파일 설정
+  {
+    files: ['cypress/e2e/**/*.cy.js'],
+    plugins: {
+      cypress: cypressPlugin,
+    },
+    languageOptions: {
+      globals: {
+        cy: true,
+      },
+    },
+  },
+  prettier,
+];

index.advanced.html

@@ -1,32 +1,40 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Hanghae Shopping Cart</title>
-  <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
-  <script src="https://cdn.tailwindcss.com"></script>
-  <script>
-  tailwind.config = {
-    theme: {
-      extend: {
-        fontFamily: {'sans': ['-apple-system', 'BlinkMacSystemFont', 'Helvetica Neue', 'Arial', 'sans-serif']},
-        letterSpacing: {
-          'extra-wide': '0.3em',
-          'super-wide': '0.25em',
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Hanghae Shopping Cart</title>
+    <!-- Note: Tailwind CDN is for development only. For production, use PostCSS or Tailwind CLI -->
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+      tailwind.config = {
+        theme: {
+          extend: {
+            fontFamily: {
+              sans: [
+                '-apple-system',
+                'BlinkMacSystemFont',
+                'Helvetica Neue',
+                'Arial',
+                'sans-serif',
+              ],
+            },
+            letterSpacing: {
+              'extra-wide': '0.3em',
+              'super-wide': '0.25em',
+            },
+            fontSize: { '2xs': '0.625rem' },
+            maxHeight: { 800: '800px' },
+            backgroundImage: { 'gradient-black': 'linear-gradient(135deg, #000 0%, #333 100%)' },
+          },
         },
-        fontSize: {'2xs': '0.625rem'},
-        maxHeight: {'800': '800px'},
-        backgroundImage: {'gradient-black': 'linear-gradient(135deg, #000 0%, #333 100%)',}
-      }
-    }
-  }
-  </script>
-</head>
-<body class="bg-gray-50 text-black antialiased overflow-hidden h-screen text-sm">
-<div id="app" class="max-w-screen-xl h-screen max-h-800 mx-auto p-8 flex flex-col">
-  <!-- Content will be dynamically generated here -->
-</div>
-<script type="module" src="./src/advanced/main.advanced.js"></script>
-</body>
-</html>
+      };
+    </script>
+  </head>
+  <body class="bg-gray-50 text-black antialiased overflow-hidden h-screen text-sm">
+    <div id="app" class="max-w-screen-xl h-screen max-h-800 mx-auto p-8 flex flex-col">
+      <!-- Content will be dynamically generated here -->
+    </div>
+    <script type="module" src="./src/advanced/main.advanced.tsx"></script>
+  </body>
+</html>

package.json

@@ -1,11 +1,13 @@
 {
   "name": "front-6th-chapter2-1",
+  "homepage": "https://esoby.github.io/front_6th_chapter2-1/",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
+    "deploy": "vite build && cp dist/index.advanced.html dist/index.html && gh-pages -d dist",
     "preview": "vite preview",
     "start:basic": "vite serve --open ./index.basic.html",
     "start:advanced": "vite serve --open ./index.advanced.html",
@@ -15,11 +17,35 @@
     "test:ui": "vitest --ui"
   },
   "devDependencies": {
+    "@eslint/js": "^9.32.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.1.9",
+    "@types/react-dom": "^19.1.7",
+    "@vitest/coverage-v8": "^3.2.4",
     "@vitest/ui": "^3.2.4",
+    "eslint": "^9.32.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-cypress": "^5.1.0",
+    "eslint-plugin-prettier": "^5.5.3",
+    "eslint-plugin-react": "^7.37.5",
+    "gh-pages": "^6.3.0",
+    "globals": "^16.3.0",
     "jsdom": "^26.1.0",
-    "vite": "^7.0.5",
+    "prettier": "^3.6.2",
+    "typescript": "^5.8.3",
+    "vite": "^5.4.19",
     "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@typescript-eslint/eslint-plugin": "^8.38.0",
+    "@typescript-eslint/parser": "^8.38.0",
+    "@vitejs/plugin-react": "^4.7.0",
+    "eslint-plugin-compat": "^6.0.2",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-vitest": "^0.5.4",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
   }
 }