chore: typescript 마이그레이션을 하라

- 타입스크립트로 마이그레이션

.eslintrc.js

@@ -6,19 +6,43 @@ module.exports = {
   extends: [
     'plugin:react/recommended',
     'airbnb',
+    'plugin:@typescript-eslint/recommended',
   ],
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 12,
     sourceType: 'module',
   },
+  settings: {
+    'import/resolver': {
+      typescript: {
+        project: './tsconfig.json',
+      },
+    },
+    'import/extensions': ['.js', '.jsx', '.ts', '.tsx'],
+    'import/parsers': {
+      '@typescript-eslint/parser': ['.ts', '.tsx'],
+    },
+  },
   plugins: [
     'react',
+    '@typescript-eslint',
   ],
   rules: {
     'import/no-unresolved': 'off',
     'react/prop-types': 'off',
+    'react/jsx-filename-extension': ['warn', {
+      extensions: ['.js', '.jsx', '.ts', '.tsx'],
+    }],
+    'no-use-before-define': 'off',
+    'import/extensions': ['error', 'ignorePackages', {
+      js: 'never',
+      jsx: 'never',
+      ts: 'never',
+      tsx: 'never',
+    }],
   },
 };

docusaurus.config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 const lightCodeTheme = require('prism-react-renderer/themes/github');
 const darkCodeTheme = require('prism-react-renderer/themes/palenight');
 require('dotenv').config();

package.json

@@ -27,14 +27,20 @@
     "uuid": "^9.0.0"
   },
   "devDependencies": {
+    "@docusaurus/module-type-aliases": "^2.2.0",
     "@svgr/webpack": "^6.5.1",
+    "@tsconfig/docusaurus": "^1.0.6",
+    "@typescript-eslint/eslint-plugin": "^5.13.0",
+    "@typescript-eslint/parser": "^5.0.0",
     "eslint": "^8.26.0",
     "eslint-config-airbnb": "^19.0.4",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
     "file-loader": "^6.2.0",
+    "typescript": "^4.9.4",
     "url-loader": "^4.1.1"
   }
 }

src/components/RowSummaryBooksWrapper.jsx → src/components/RowSummaryBooksWrapper.tsx

@@ -5,11 +5,16 @@ import styled from '@emotion/styled';
 import { v4 as uuidv4 } from 'uuid';
 
 import SummaryBookTemplate from './SummaryBookTemplate';
+import { Book } from '../data/books';
 
-function RowSummaryBooksWrapper({ booksInfo }) {
+type Props = {
+  rowBooks: Book[];
+}
+
+function RowSummaryBooksWrapper({ rowBooks }: Props) {
   return (
     <BooksInfoWrapper className="row">
-      {booksInfo.map(({ link, bookName, imgName }) => (
+      {rowBooks.map(({ link, bookName, imgName }) => (
         <SummaryBookTemplate
           key={uuidv4()}
           link={link}

src/components/SummaryBookTemplate.jsx → src/components/SummaryBookTemplate.tsx

@@ -5,8 +5,11 @@ import styled from '@emotion/styled';
 import clsx from 'clsx';
 
 import useBaseUrl from '@docusaurus/useBaseUrl';
+import { Book } from '../data/books';
 
-function SummaryBookTemplate({ link, bookName, imgName }) {
+type Props = Book
+
+function SummaryBookTemplate({ link, bookName, imgName }: Props) {
   const imgSrc = useBaseUrl(`/img/books/${imgName}`);
 
   return (

src/components/SummaryBooks.jsx → src/components/SummaryBooks.tsx

@@ -4,13 +4,6 @@ import styled from '@emotion/styled';
 
 import SummaryBooksView from './SummaryBooksView';
 
-const BooksInfoSection = styled.section`
-  display: flex;
-  align-items: center;
-  padding: 2rem 0 5rem 0;
-  width: 100%;
-`;
-
 function SummaryBooks() {
   return (
     <BooksInfoSection>
@@ -26,3 +19,10 @@ function SummaryBooks() {
 }
 
 export default SummaryBooks;
+
+const BooksInfoSection = styled.section`
+  display: flex;
+  align-items: center;
+  padding: 2rem 0 5rem 0;
+  width: 100%;
+`;

src/components/SummaryBooksView.jsx → src/components/SummaryBooksView.tsx

@@ -11,19 +11,23 @@ import MountainSvg from '../../static/img/undraw_docusaurus_mountain.svg';
 
 import RowSummaryBooksWrapper from './RowSummaryBooksWrapper';
 
-function SummaryBooksView({ title }) {
+type Props = {
+  title: string;
+}
+
+function SummaryBooksView({ title }: Props) {
   return (
     <div className={clsx('col')}>
       <div className="text--center">
-        <MountainImg alt={title} />
+        <MountainImg />
       </div>
       <div className="text--center padding-horiz--md">
         <h2>{title}</h2>
         <div>
-          {books.map((booksInfo) => (
+          {books.map((rowBooks) => (
             <RowSummaryBooksWrapper
               key={uuidv4()}
-              booksInfo={booksInfo}
+              rowBooks={rowBooks}
             />
           ))}
         </div>

src/data/books.js → src/data/books.ts

@@ -1,7 +1,13 @@
 const PREFIX_DOCS_URL = 'https://saseungmin.github.io/reading_books_record_repository/docs';
 const PREFIX_SUMMARIZE_URL = 'https://github.com/saseungmin/reading_books_record_repository/tree/master/summarize_books_in_markdown';
 
-const books = [
+export type Book = {
+  link: string;
+  bookName: string;
+  imgName: string;
+};
+
+const books: Book[][] = [
   [
     {
       link: `${PREFIX_SUMMARIZE_URL}/%ED%95%A8%EC%88%98%ED%98%95%20%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8`,

src/pages/index.jsx → src/pages/index.tsx

@@ -12,7 +12,7 @@ function Home() {
   return (
     <Layout
       title={`Hello from ${siteConfig.title}`}
-      description="Description will go into a meta tag in <head />"
+      description={siteConfig.tagline}
     >
       <HomepageHeader />
       <main>

tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "@tsconfig/docusaurus/tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+  },
+}