Configure TypeScript (DL-17)

client/package.json

@@ -4,18 +4,27 @@
   "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/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": {

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,7 @@
+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;
+  first_name: string;
+  last_name: string;
+  avatar: string;
+}

client/src/configureStore.js → client/src/configureStore.ts

@@ -2,22 +2,26 @@ import { configureStore, getDefaultMiddleware } from '@reduxjs/toolkit';
 import rootReducer from './store';
 import loggerMiddleware from './middlewares/logger';
 import monitorReducerEnhancer from './enhancers/monitorReducers';
+import { AppState } from './store/store.types';
 
-export default function configureAppStore(preloadedState) {
+export type AppDispatch = ReturnType<typeof configureAppStore>['dispatch'];
+
+const configureAppStore = (preloadedState = {}) => {
   const store = configureStore({
     reducer: rootReducer,
     preloadedState,
-    middleware: [loggerMiddleware, ...getDefaultMiddleware()],
+    middleware: [loggerMiddleware, ...getDefaultMiddleware<AppState>()],
     enhancers: [monitorReducerEnhancer],
   });
 
   if (process.env.NODE_ENV === 'development' && module.hot) {
     module.hot.accept('./store', () => {
-      // eslint-disable-next-line global-require
       const newRootReducer = require('./store').default;
       store.replaceReducer(newRootReducer);
     });
   }
 
   return store;
-}
+};
+
+export default configureAppStore;

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" />

client/src/store/ReduxSample/ReduxSample.actions.ts

@@ -0,0 +1,32 @@
+import axios from 'axios';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import { createStandardAction } from '../action-helpers';
+import { UserSampleState } from './ReduxSample.types';
+import { AppState } from '../store.types';
+import { AppDispatch } from '../../configureStore';
+
+interface ThunkAPI {
+  state: AppState;
+  dispatch: AppDispatch;
+}
+
+export const GET_SAMPLE_USERS = '@sample/GET_SAMPLE_USERS';
+export const TRIGGER_BTN_CLICK = '@sample/TRIGGER_BTN_CLICK';
+export const RESET = '@sample/RESET';
+
+const fetchSampleUsers = async () => {
+  try {
+    const { data } = await axios.get('https://reqres.in/api/users');
+    return data.data;
+  } catch (error) {
+    console.error(error);
+  }
+};
+
+const ReduxSampleActions = {
+  getSampleUsers: createAsyncThunk<UserSampleState[], void, ThunkAPI>(GET_SAMPLE_USERS, fetchSampleUsers),
+  triggerBtnClick: createStandardAction<{ message: string }>(TRIGGER_BTN_CLICK),
+  reset: createStandardAction(RESET),
+};
+
+export default ReduxSampleActions;

client/src/store/ReduxSample/ReduxSample.reducers.js → client/src/store/ReduxSample/ReduxSample.reducers.ts

@@ -1,25 +1,30 @@
 import { createReducer } from '@reduxjs/toolkit';
-import ReduxSampleActions from './ReduxSample.actions';
+import ReduxSampleActions, { GET_SAMPLE_USERS, TRIGGER_BTN_CLICK, RESET } from './ReduxSample.actions';
+import { ReduxSampleState } from './ReduxSample.types';
 
-export const initialState = {
+export const initialState: ReduxSampleState = {
   sampleUsers: [],
   sampleButton: {
     message: 'Fetch Users',
     isClicked: false,
+    loading: false,
   },
 };
 
+// TODO createReducer 타입 추가
 const reduxSampleReducer = createReducer(initialState, {
+  // TODO createAsyncAction helper 생성 후 fulfilled 상태 타입 확인
   [ReduxSampleActions.getSampleUsers.fulfilled]: (state, { payload: userData }) => {
+    console.log(userData);
     state.sampleUsers = userData;
   },
-  [ReduxSampleActions.triggerBtnClick]: (state, action) => {
+  [TRIGGER_BTN_CLICK]: (state, action) => {
     const { message } = action.payload;
 
     state.sampleButton.message = message;
     state.sampleButton.loading = true;
   },
-  [ReduxSampleActions.reset]: () => initialState,
+  [RESET]: () => initialState,
 });
 
 export default reduxSampleReducer;

client/src/store/ReduxSample/ReduxSample.types.ts

@@ -0,0 +1,16 @@
+export interface UserSampleState {
+  id: number;
+  email: string;
+  first_name: string;
+  last_name: string;
+  avatar: string;
+}
+
+export interface ReduxSampleState {
+  sampleUsers: UserSampleState[];
+  sampleButton: {
+    message: string;
+    isClicked: boolean;
+    loading: boolean;
+  };
+}

client/src/store/action-helpers.ts

@@ -0,0 +1,9 @@
+import { createAction } from '@reduxjs/toolkit';
+
+function actionWithPayload<T>() {
+  return (payload?: T) => ({ payload });
+}
+
+export const createStandardAction = <T>(action: string) => createAction(action, actionWithPayload<T>());
+
+// TODO createStandardAction와 같이 createThunkAction 용으로 createAsyncAction helper 생성 필요 (thunkApi를 이용하려면 generic을 받아야함)

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

@@ -1,7 +1,7 @@
-import { combineReducers } from '@reduxjs/toolkit';
+import { combineReducers, Reducer } from '@reduxjs/toolkit';
 import reduxSampleReducer from './ReduxSample/ReduxSample.reducers';
 
-const rootReducer = combineReducers({
+const rootReducer: Reducer = combineReducers({
   sample: reduxSampleReducer,
 });
 

client/src/store/store.types.ts

@@ -0,0 +1,3 @@
+import rootReducer from './index';
+
+export type AppState = ReturnType<typeof rootReducer>;

client/src/styleguide/components/StyleContainer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import classNames from 'classnames';
+import './StyleContainer.scss';
+import { DirectionType, PosXType, PosYType } from '../../types/ui.types';
+
+type AttributeProps = React.HTMLAttributes<HTMLDivElement>;
+
+type Props = AttributeProps & {
+  direction: DirectionType;
+  posX: PosXType;
+  posY: PosYType;
+};
+
+const StyleContainer: React.FC<Props> = ({ direction = 'horizontal', posX = 'left', posY = 'top', ...rest }) => (
+  <div
+    {...rest}
+    className={classNames('style-container', `position-${posX}-${posY}`, {
+      column: direction === 'horizontal',
+    })}
+  />
+);
+
+export default StyleContainer;