[#10] Eslint 관련 버그 수정

.eslintrc.json

@@ -8,26 +8,54 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "airbnb",
+    "airbnb-typescript",
     "plugin:prettier/recommended"
   ],
   "settings": {
     "react": {
       "version": "detect"
+    },
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      },
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
     }
   },
   "parserOptions": {
     "ecmaFeatures": {
       "jsx": true
     },
     "ecmaVersion": 2018,
-    "sourceType": "module",
+    "project": ["tsconfig.json"],
+    "sourceType": "module"
   },
   "plugins": ["react", "react-hooks", "prettier"],
   "rules": {
     "react/react-in-jsx-scope": 0,
+    "react/function-component-definition": [2, { "namedComponents": "arrow-function" }],
     "react/prefer-stateless-function": 0,
     "react/jsx-filename-extension": 0,
     "react/jsx-one-expression-per-line": 0,
-    "no-nested-ternary": 0
+    "no-nested-ternary": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "react/jsx-props-no-spreading": 0,
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
   }
-}
+}

package.json

@@ -14,7 +14,6 @@
     "@types/react": "18.2.15",
     "@types/react-dom": "18.2.7",
     "eslint": "^8.45.0",
-    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-next": "13.4.11",
     "next": "13.4.11",
     "react": "18.2.0",
@@ -25,8 +24,12 @@
   },
   "devDependencies": {
     "@types/styled-components": "^5.1.26",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
+    "@typescript-eslint/parser": "^6.2.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-prettier": "^8.8.0",
+    "eslint-import-resolver-typescript": "^3.4.0",
     "eslint-plugin-import": "^2.27.5",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-prettier": "^5.0.0",

pages/_app.tsx

@@ -1,13 +1,13 @@
 import { AppProps } from 'next/app';
 import { GlobalStyle } from '../styles/globalStyle';
 
-function MyApp({ Component, pageProps }: AppProps) {
+const MyApp = ({ Component, pageProps }: AppProps) => {
   return (
     <>
       <GlobalStyle />
       <Component {...pageProps} />
     </>
   );
-}
+};
 
 export default MyApp;

pages/_document.tsx

@@ -1,12 +1,6 @@
-import { Fragment } from "react";
-import Document, {
-  DocumentContext,
-  Head,
-  Html,
-  Main,
-  NextScript,
-} from "next/document";
-import { ServerStyleSheet } from "styled-components";
+import { Fragment } from 'react';
+import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/document';
+import { ServerStyleSheet } from 'styled-components';
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
@@ -16,8 +10,7 @@ export default class MyDocument extends Document {
     try {
       ctx.renderPage = () =>
         originalRenderPage({
-          enhanceApp: (App) => (props) =>
-            sheet.collectStyles(<App {...props} />),
+          enhanceApp: (App) => (props) => sheet.collectStyles(<App {...props} />),
         });
 
       const initialProps = await Document.getInitialProps(ctx);
@@ -46,4 +39,4 @@ export default class MyDocument extends Document {
       </Html>
     );
   }
-}
+}

pages/index.tsx

@@ -1,9 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
 
 const Home: NextPage = () => {
-  return (
-    <h1>Home Page</h1>
-  )
-}
+  return <h1>Home Page</h1>;
+};
 
-export default Home
+export default Home;

pages/mypage.tsx

@@ -1,9 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
 
 const Mypage: NextPage = () => {
-  return (
-    <h1>Mypage Page</h1>
-  )
-}
+  return <h1>Mypage Page</h1>;
+};
 
-export default Mypage
+export default Mypage;

pages/search.tsx

@@ -1,9 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
 
 const Search: NextPage = () => {
-  return (
-    <h1>Search Page</h1>
-  )
-}
+  return <h1>Search Page</h1>;
+};
 
-export default Search
+export default Search;

pages/signin.tsx

@@ -1,9 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
 
 const Signin: NextPage = () => {
-  return (
-    <h1>Signin Page</h1>
-  )
-}
+  return <h1>Signin Page</h1>;
+};
 
-export default Signin
+export default Signin;

pages/signup.tsx

@@ -1,9 +1,7 @@
-import type { NextPage } from 'next'
+import type { NextPage } from 'next';
 
 const Signup: NextPage = () => {
-  return (
-    <h1>Signup Page</h1>
-  )
-}
+  return <h1>Signup Page</h1>;
+};
 
-export default Signup
+export default Signup;