[#10] Fix: 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"
+      }
+    ]
   }
-}
+}

components/reusable/Card.tsx

@@ -1,9 +1,9 @@
-import { Spacing } from './Spacing';
-import { Tag } from './Tag';
 import styled from 'styled-components';
 import colors from '@/styles/colors';
+import Spacing from './Spacing';
+import Tag from './Tag';
 
-export function Card() {
+const Card = () => {
   return (
     <StyledCard>
       <Tag variant="color" content="직무" />
@@ -17,11 +17,11 @@ export function Card() {
       </ContentText>
       <Spacing direction="vertical" size={16} />
       <StackTagsWrap>
-        <Tag variant="gray" content="스택"></Tag>
+        <Tag variant="gray" content="스택" />
         <Spacing direction="horizontal" size={8} />
-        <Tag variant="gray" content="스택"></Tag>
+        <Tag variant="gray" content="스택" />
         <Spacing direction="horizontal" size={8} />
-        <Tag variant="gray" content="스택"></Tag>
+        <Tag variant="gray" content="스택" />
       </StackTagsWrap>
       <Spacing direction="vertical" size={16} />
       <InfoTextWrap>
@@ -34,9 +34,11 @@ export function Card() {
       </InfoTextWrap>
     </StyledCard>
   );
-}
+};
 
-const StyledCard: any = styled.div`
+export default Card;
+
+const StyledCard = styled.div`
   display: flex;
   flex-direction: column;
   align-items: start;

components/reusable/Spacing.tsx

@@ -2,15 +2,16 @@ import { HTMLAttributes, memo } from 'react';
 import styled from 'styled-components';
 
 interface Props extends HTMLAttributes<HTMLDivElement> {
-  children?: never;
-  direction?: 'horizontal' | 'vertical';
+  direction: 'horizontal' | 'vertical';
   size: number;
 }
 
-export const Spacing = memo(function Spacing({ direction = 'vertical', size, ...props }: Props) {
-  return <StyledSpacing direction={direction} size={size} />;
+const Spacing = memo(function Spacing({ direction = 'vertical', size }: Props, ...props) {
+  return <StyledSpacing direction={direction} size={size} {...props} />;
 });
 
+export default Spacing;
+
 interface StyledSpacingProps {
   readonly direction: 'horizontal' | 'vertical';
   readonly size: number;

components/reusable/Tag.tsx

@@ -1,18 +1,20 @@
-import colors from '@/styles/colors';
 import styled from 'styled-components';
+import colors from '@/styles/colors';
 
 interface Props extends React.HTMLAttributes<HTMLSpanElement> {
-  readonly variant?: 'color' | 'gray';
+  readonly variant: 'color' | 'gray';
   readonly content: string;
 }
 
-export function Tag({ variant = 'color', content, ...props }: Props) {
+const Tag = ({ variant = 'color', content, ...props }: Props) => {
   return (
     <StyledTag variant={variant} {...props}>
       {content}
     </StyledTag>
   );
-}
+};
+
+export default Tag;
 
 interface StyledTagProps {
   readonly variant: 'color' | 'gray';

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,5 +1,5 @@
-import { Card } from '@/components/reusable/Card';
 import type { NextPage } from 'next';
+import Card from '@/components/reusable/Card';
 
 const Home: NextPage = () => {
   return (

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;