NO-ISSUE Configure TypeScript

client/.eslintignore

@@ -2,3 +2,5 @@ src/registerServiceWorker.js
 
 # ignore test files
 src/**/*.test.js
+config-overrides.js
+styleguide.config.js

client/.eslintrc.json

@@ -1,27 +1,59 @@
 {
-  "extends": ["airbnb", "prettier/react", "plugin:react/recommended"],
-  "plugins": ["react", "prettier"],
+  "root": true,
+  "env": {
+    "browser": true,
+    "jest/globals": true
+  },
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json",
+    "sourceType": "module"
+  },
+  "plugins": ["@typescript-eslint", "jest"],
   "rules": {
-    "prettier/prettier": ["error"],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/prefer-default-export": "off",
+    "import/no-extraneous-dependencies": "off",
+    "global-require": "off",
 
+    "no-param-reassign": [2, { "props": false }],
+    "spaced-comment": ["error", "always", { "markers": ["/"] }],
     "consistent-return": "off",
-    "import/no-unresolved": "off",
-    "import/prefer-default-export": "off",
-    "no-param-reassign": "off",
-    "operator-linebreak": "off",
-    "object-curly-newline": "off",
 
+    "react/prop-types": "off",
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".tsx"] }],
     "react/jsx-props-no-spreading": "off",
-    "react/require-default-props": "off"
-  },
-  "parser": "babel-eslint",
-  "env": {
-    "browser": true,
-    "jest": true
+    "react/button-has-type": "off",
+
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off"
   },
   "settings": {
+    "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"]
+    },
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    },
     "react": {
-      "pragma": "React",
       "version": "detect"
     }
   }

client/package.json

@@ -4,18 +4,28 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.3.5",
+    "@types/classnames": "^2.2.10",
+    "@types/jest": "^25.2.3",
+    "@types/node": "^14.0.12",
+    "@types/react": "^16.9.35",
+    "@types/react-dom": "^16.9.8",
+    "@types/react-redux": "^7.1.9",
+    "@types/react-router-dom": "^5.1.5",
+    "@types/webpack-env": "^1.15.2",
     "antd": "^4.2.2",
     "axios": "^0.19.2",
     "classnames": "^2.2.6",
     "customize-cra": "^0.9.1",
     "node-sass": "^4.14.0",
-    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-app-rewired": "^2.1.6",
+    "react-docgen": "^5.3.0",
+    "react-docgen-typescript": "^1.16.6",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "3.4.1"
+    "react-scripts": "3.4.1",
+    "typescript": "^3.9.5"
   },
   "husky": {
     "hooks": {
@@ -28,7 +38,7 @@
     "test": "react-app-rewired test --watchAll=false --coverage --detectOpenHandles --forceExit",
     "styleguide": "styleguidist server --config styleguide.config.js",
     "styleguide:build": "styleguidist build --config styleguide.config.js",
-    "lint:fix": "eslint './src/**/*.{js, jsx}'"
+    "lint:fix": "eslint \"src/**/*.ts*\" --fix"
   },
   "engines": {
     "node": ">= 12.0.0",
@@ -51,16 +61,18 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
+    "@typescript-eslint/eslint-plugin": "^3.3.0",
+    "@typescript-eslint/parser": "^3.3.0",
     "babel-eslint": "^10.1.0",
     "babel-plugin-import": "^1.13.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-config-babel": "^9.0.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.20.2",
+    "eslint-plugin-jest": "^23.16.0",
     "eslint-plugin-prettier": "^3.1.3",
     "eslint-plugin-react": "^7.19.0",
-    "eslint-plugin-standard": "^4.0.1",
     "husky": "^4.2.5",
     "prettier": "^2.0.5",
     "react-styleguidist": "^11.0.5",

client/src/components/Button/Button.md

@@ -1,5 +1,5 @@
 Button example:
 
 ```js
-<Button text="Button" />
+<Button>Button Example</Button>
 ```

client/src/components/Button/Button.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Props } from './Button.types';
+
+// TODO 버튼 컴포넌트 작성
+const Button: React.FC<Props> = ({ children, type = 'button', ...rest }) => (
+  <button {...rest} type={type}>
+    {children}
+  </button>
+);
+
+export default Button;

client/src/components/Button/Button.types.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+
+type AttributeProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+
+type CustomProps = {
+  theme?: 'primary' | 'secondary';
+};
+
+export type Props = AttributeProps & CustomProps;

client/src/components/Sample/ReduxSample.md

@@ -1,8 +1,8 @@
 ReduxSample example:
 
 ```js
-import StyleContainer from '../../styleguide/components/StyleContainer.jsx';
-import StoreProvider from '../../styleguide/components/StoreProvider.jsx';
+import StyleContainer from '../../styleguide/components/StyleContainer.tsx';
+import StoreProvider from '../../styleguide/components/StoreProvider.tsx';
 
 <StoreProvider>
   <StyleContainer style={{ height: 300 }} direction="vertical">

client/src/components/Sample/ReduxSample.jsx → client/src/components/Sample/ReduxSample.tsx

@@ -2,32 +2,38 @@ import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button } from '../index';
 import { ReduxSampleActions } from '../../store/actions';
+import { UserSampleState } from './ReduxSample.types';
+import { AppState } from '../../store/store.types';
 
 // TODO redux 쓰는 법 익히게 되면 제거
-const ReduxSample = () => {
+const ReduxSample: React.FC = () => {
   const {
     sampleButton: { message },
     sampleUsers,
-  } = useSelector((state) => state.sample);
+  } = useSelector((state: AppState) => state.sample);
 
   const dispatch = useDispatch();
 
   const handleClick = () => {
     dispatch(ReduxSampleActions.getSampleUsers());
-    dispatch(ReduxSampleActions.triggerBtnClick('SUCCESS'));
+    dispatch(ReduxSampleActions.triggerBtnClick({ message: 'SUCCESS' }));
   };
 
   const handleReset = () => dispatch(ReduxSampleActions.reset());
 
   return (
     <>
       <div style={{ display: 'flex' }}>
-        <Button type="button" onClick={handleClick} text={message} />
-        <Button type="button" onClick={handleReset} text="Reset" />
+        <Button type="button" onClick={handleClick}>
+          {message}
+        </Button>
+        <Button type="button" onClick={handleReset}>
+          Reset
+        </Button>
       </div>
       {sampleUsers.length > 0 && (
         <ul>
-          {sampleUsers.map((user) => (
+          {sampleUsers.map((user: UserSampleState) => (
             <li key={user.id}>{user.email}</li>
           ))}
         </ul>

client/src/components/Sample/ReduxSample.types.ts

@@ -0,0 +1,7 @@
+export interface UserSampleState {
+  id: number;
+  email: string;
+  firstName: string;
+  lastName: string;
+  avatar: string;
+}

client/src/components/index.js → client/src/components/index.ts

@@ -1 +1,2 @@
+/* eslint-disable import/extensions */
 export { default as Button } from './Button/Button';

client/src/index.jsx → client/src/index.tsx

@@ -4,7 +4,7 @@ import { Provider } from 'react-redux';
 import App from './pages/App';
 import './index.css';
 import * as serviceWorker from './serviceWorker';
-import configureStore from './configureStore';
+import { configureAppStore as configureStore } from './store/index';
 
 const store = configureStore();
 

client/src/pages/Home/Home.test.js → client/src/pages/Home/Home.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
 
 import Home from './Home';
 

client/src/pages/Home/Home.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import './Home.css';
+
+function Home() {
+  return (
+    <div className="home">
+      <header className="home__header">
+        <h1>d.log</h1>
+      </header>
+    </div>
+  );
+}
+
+export default Home;

client/src/pages/Router.jsx → client/src/pages/Router.tsx

@@ -12,11 +12,11 @@ export const PAGE_URL = {
 
 const ROUTES = [{ path: PAGE_URL.HOME, exact: true, component: Home }];
 
-const Router = () => (
+const Router: React.FC = () => (
   <BrowserRouter>
     <Switch>
       <Redirect exact path={PAGE_URL.ROOT} to={PAGE_URL.HOME} />
-      {ROUTES.map(route => (
+      {ROUTES.map((route) => (
         <Route {...route} key={route.path} />
       ))}
     </Switch>

client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />