기본

buildyourteam · Jul 8, 2020 · c5264a0 · c5264a0
1 parent 056354f
commit c5264a0
Show file tree

Hide file tree

Showing 20 changed files with 6,485 additions and 5,073 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -3,12 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@reduxjs/toolkit": "^1.4.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "axios": "^0.19.2",
+    "bootstrap": "^4.5.0",
+    "eslint": "6.6.0",
+    "eslint-config-prettier": "^6.11.0",
+    "prettier": "^2.0.5",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
-    "react-scripts": "3.4.1"
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "reactstrap": "^8.5.1",
+    "redux": "^4.0.5",
+    "typescript": "^3.9.6"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -17,7 +28,18 @@
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
-    "extends": "react-app"
+    "extends": [
+      "react-app",
+      "airbnb"
+    ],
+    "rules": {
+      "react/prefer-stateless-function": 0,
+      "react/jsx-filename-extension": 0,
+      "react/jsx-one-expression-per-line": 0
+    },
+    "env": {
+      "browser": true
+    }
   },
   "browserslist": {
     "production": [

diff --git a/public/index.html b/public/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />

diff --git a/src/App.css b/src/App.css
@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,17 @@
 import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { Root } from './pages';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
+    <div>
+      <header>
         <p>
-          Edit <code>src/App.js</code> and save to reload.
+          Header
         </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
       </header>
+        <div>
+          <Root />
+        </div>
     </div>
   );
 }

diff --git a/src/components/index.js b/src/components/index.js
@@ -0,0 +1 @@
+export { default as Button } from './tempButton';
diff --git a/src/components/tempButton.jsx b/src/components/tempButton.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function Button(props){
+    return(
+        <button onClick={props.onClick}>
+            {props.children}
+        </button>
+    )
+}
diff --git a/src/hook/index.js b/src/hook/index.js
@@ -0,0 +1,3 @@
+export { useTemporaryApi, useGetTemporary, usePostTemporary } from './useHook';
+export { useRequest } from './useRequest';
+export { default as useMove } from './usePageMove';
diff --git a/src/hook/useHook.js b/src/hook/useHook.js
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { setTemporary } from "../reducers/temporary";
+const axios = require("axios");
+
+export function useTemporaryApi() {
+  const { temporary } = useSelector((state) => state.temproray);
+  const getApi = async () => {
+    const res = await axios.get(`http://127.0.0.1:3001/getData`);
+    return res.data;
+  };
+  const postApi = async (data) => {
+    const res = await axios.post(`http://127.0.0.1:3001/postData`, {data: data});
+    return res.data;
+  };
+
+  return [temporary, { getApi, postApi }];
+}
+
+export function useGetTemporary(data, fulfilled, rejected, error, getApi) {
+  const [tempState, setTempState] = useState(data);
+
+  useEffect(() => {
+    if (fulfilled) setTempState(data);
+  }, [fulfilled]);
+
+  useEffect(() => {
+    getApi();
+  }, []);
+
+  useEffect(()=>{
+    if(rejected){
+        if(error){
+            alert(error);
+            console.log(error)
+        }
+    }
+  }, [rejected]);
+
+  const clickPlusButton = () => {
+    setTempState((value) => {
+      return value + 1;
+    });
+  };
+
+  return [tempState, { clickPlusButton }];
+}
+
+export function usePostTemporary(data, fulfilled, rejected, error, posApi) {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+      console.log(fulfilled)
+      if (fulfilled){
+        alert('전송 성공!');
+        dispatch(setTemporary(data));
+      } 
+    }, [fulfilled]);
+
+    useEffect(()=>{
+        if(rejected){
+            if(error){
+                alert(error.response);
+                console.log(error)
+            }
+        }
+      }, [rejected])
+}
diff --git a/src/hook/usePageMove.js b/src/hook/usePageMove.js
@@ -0,0 +1,9 @@
+import { useEffect } from 'react';
+import { useHistory } from 'react-router-dom';
+
+export default function useMove(condition, destination) {
+  const history = useHistory();
+  useEffect(() => {
+    if (condition) history.push(`./${destination}`);
+  }, [condition]);
+}
diff --git a/src/hook/useRequest.ts b/src/hook/useRequest.ts
@@ -0,0 +1,83 @@
+import { useEffect, useReducer } from 'react';
+
+export type Service<R, P extends any[]> = (...args: P) => Promise<R>;
+
+export type RequestState = {
+  data: any;
+  error: any;
+  pending: boolean;
+  fulfilled: boolean;
+  rejected: boolean;
+};
+
+export type RequestAction =
+  | { type: 'request' }
+  | { type: 'success'; payload: any }
+  | { type: 'failure'; payload: string };
+
+function reducer(state: RequestState, action: RequestAction): RequestState {
+  switch (action.type) {
+    case 'request':
+      return {
+        ...state,
+        error: null,
+        pending: true,
+        fulfilled: false,
+        rejected: false,
+      };
+    case 'success':
+      return {
+        data: action.payload,
+        error: null,
+        pending: false,
+        fulfilled: true,
+        rejected: false,
+      };
+    case 'failure':
+      return {
+        ...state,
+        error: action.payload,
+        pending: false,
+        fulfilled: false,
+        rejected: true,
+      };
+  }
+}
+
+export function useRequest<R, P extends any[]>(
+  asyncTask: Service<R, P>,
+  options?: {
+    // autoFirstRun?: boolean;
+    // passArgs?: P;
+  },
+) {
+  // const {autoFirstRun = false, passArgs} = options || {};
+  const [state, dispatch] = useReducer(reducer, {
+    data: null,
+    error: null,
+    pending: false,
+    fulfilled: false,
+    rejected: false,
+  });
+  const requestActions = {
+    run: async (...args: P) => {
+      dispatch({
+        type: 'request',
+      });
+      try {
+        // then 패턴 데신에 await을 쓴 이유는 일반 함수일 경우에도 동작하도록
+        const data = await asyncTask(...args);
+        dispatch({
+          type: 'success',
+          payload: data,
+        });
+      } catch (e) {
+        dispatch({
+          type: 'failure',
+          payload: e,
+        });
+      }
+    },
+  };
+  return [state, requestActions] as const;
+}
diff --git a/src/index.js b/src/index.js
@@ -3,11 +3,20 @@ import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import * as serviceWorker from './serviceWorker';
+import { configureStore } from '@reduxjs/toolkit';
+import { Provider } from 'react-redux';
+import rootReducer from './reducers';
+
+const store = configureStore({
+  reducer: rootReducer,
+});
 
 ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
+    <React.StrictMode>
+      <Provider store={store}>
+        <App />
+      </Provider>
+    </React.StrictMode>,
   document.getElementById('root')
 );
 

diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -0,0 +1 @@
+export { default as Root } from './root';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export { default as Button } from './tempButton';