env : husky 설정 (#7)

* env : husky 설정

* test :  husky 테스트

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.eslintcache

.husky/pre-commit

@@ -0,0 +1,2 @@
+yarn run format
+yarn run lint

.prettierignore

@@ -1 +1,2 @@
-src/stories/**
+src/stories/**
+**/*stories*

.vscode/stories.tsx.code-snippets

@@ -18,8 +18,8 @@
       "",
       "export const Default: Story = {",
       "  args: {},",
-      "};"
+      "};",
     ],
-    "description": "Storybook Template"
-  }
+    "description": "Storybook Template",
+  },
 }

README.md

@@ -1 +0,0 @@
-

bable.config.js

@@ -1,7 +1,3 @@
 module.exports = {
-  presets: [
-    "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript",
-  ],
-};
+  presets: ['@babel/preset-react', '@babel/preset-env', '@babel/preset-typescript'],
+}

eslint.config.mjs

@@ -0,0 +1,65 @@
+import { FlatCompat } from '@eslint/eslintrc'
+
+const compat = new FlatCompat({
+  baseDirectory: process.cwd(),
+})
+
+export default [
+  {
+    ignores: ['**/*stories*', '**/webpack*.js', '**/webpack/**/*.js', 'src/stories/**'],
+  },
+  ...compat.config({
+    env: {
+      browser: true,
+      es2021: true,
+    },
+    parser: '@typescript-eslint/parser',
+    plugins: ['@typescript-eslint', 'prettier', '@emotion'],
+    extends: [
+      'airbnb',
+      'airbnb/hooks',
+      'plugin:import/errors',
+      'plugin:import/warnings',
+      'plugin:prettier/recommended',
+      'plugin:@typescript-eslint/recommended',
+      'prettier',
+    ],
+    rules: {
+      'prettier/prettier': 'error',
+      'react-hooks/rules-of-hooks': 'error',
+      'react-hooks/exhaustive-deps': 'warn',
+      '@typescript-eslint/no-require-imports': 'off',
+      'global-require': 'off',
+      '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
+      'react/react-in-jsx-scope': 'off',
+      'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.tsx'] }],
+      'import/extensions': ['error', 'ignorePackages', { js: 'never', jsx: 'never', ts: 'never', tsx: 'never' }],
+      'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
+      'react/function-component-definition': [
+        'error',
+        {
+          namedComponents: 'arrow-function',
+          unnamedComponents: 'arrow-function',
+        },
+      ],
+    },
+    overrides: [
+      {
+        files: ['webpack.*.js'],
+        rules: {
+          '@typescript-eslint/no-require-imports': 'off',
+          'global-require': 'off',
+          '@typescript-eslint/no-unused-vars': 'off',
+          'import/order': 'off',
+        },
+      },
+    ],
+    settings: {
+      'import/resolver': {
+        node: {
+          extensions: ['.js', '.jsx', '.ts', '.tsx'],
+        },
+      },
+    },
+  }),
+]

package.json

@@ -2,6 +2,7 @@
   "dependencies": {
     "@tanstack/react-query": "^5.59.0",
     "@tanstack/react-query-devtools": "^5.59.0",
+    "husky": "^9.1.6",
     "init": "^0.1.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -16,6 +17,9 @@
     "@babel/preset-react": "^7.25.7",
     "@babel/preset-typescript": "^7.25.7",
     "@chromatic-com/storybook": "1.9.0",
+    "@emotion/eslint-plugin": "^11.12.0",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.13.0",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",
     "@storybook/addon-links": "^8.3.0",
@@ -27,11 +31,23 @@
     "@storybook/test": "^8.3.0",
     "@types/react": "^18.3.11",
     "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
     "babel-loader": "^9.2.1",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^12.0.2",
     "dotenv": "^16.4.5",
+    "eslint": "^9.13.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jsx-a11y": "^6.10.1",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.37.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "html-webpack-plugin": "^5.6.0",
+    "husky": "^8.0.0",
+    "prettier": "^3.3.3",
     "ts-loader": "^9.5.1",
     "typescript": "^5.6.2",
     "webpack": "^5.95.0",
@@ -43,6 +59,9 @@
     "build": "webpack --mode=production  --progress",
     "start": "webpack --mode=development  --progress",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "prepare": "husky",
+    "format": "prettier --cache --write .",
+    "lint": "eslint --cache ."
   }
 }

public/index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />

src/App.tsx

@@ -1,5 +1,5 @@
 const App: React.FC = () => {
-  return <div>hello world!!!!!</div>
+  return <div>hello world!!!!!!</div>
 }
 
 export default App