Temp

.gitignore

@@ -22,4 +22,7 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 
-Test.tsx
+Test.tsx
+
+modules/
+

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  presets: [
+    ['@babel/preset-env', { targets: { node: 'current' } }],
+    '@babel/preset-typescript',
+  ],
+};

package.json

@@ -3,24 +3,36 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@craco/craco": "^6.1.2",
+    "@hookform/error-message": "^2.0.0",
+    "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/node": "^12.0.0",
     "@types/react-dom": "^17.0.0",
+    "axios": "^0.21.1",
+    "immer": "^9.0.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-hook-form": "^7.10.1",
+    "react-redux": "^7.2.4",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.3",
+    "redux": "^4.1.0",
+    "redux-actions": "^2.6.5",
+    "redux-devtools-extension": "^2.13.9",
+    "redux-saga": "^1.1.3",
     "sass": "^1.34.0",
+    "typesafe-actions": "^5.1.0",
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "cross-env NODE_PATH=src react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": " react-scripts jest",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -42,7 +54,14 @@
     ]
   },
   "devDependencies": {
+    "@babel/core": "^7.14.3",
+    "@babel/preset-env": "^7.14.2",
+    "@babel/preset-typescript": "^7.13.0",
     "@types/react": "^17.0.5",
-    "@types/react-router-dom": "^5.1.7"
+    "@types/react-redux": "^7.1.16",
+    "@types/react-router-dom": "^5.1.7",
+    "@types/redux-actions": "^2.6.1",
+    "craco-alias": "^3.0.1",
+    "cross-env": "^7.0.3"
   }
 }

src/Routes.js

@@ -0,0 +1,46 @@
+import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
+import Intro from 'pages/Intro';
+import Home from 'pages/Home';
+import MyPage from 'pages/MyPage';
+import SignUp from 'components/SignUp';
+import UserInfoContextProvider from 'contexts/UserInfoContextProvider';
+import BoardCreator from 'pages/BoardCreator';
+import AuthRoute from 'components/AuthRoute';
+
+const Routes = () => {
+  return (
+    <Router>
+      <Switch>
+        <Route exact path='/'>
+          <UserInfoContextProvider>
+            <Intro />
+          </UserInfoContextProvider>
+        </Route>
+        {/* <AuthRoute exact path='/' component={Intro} /> */}
+        <Route path='/home'>
+          <UserInfoContextProvider>
+            <Home />
+          </UserInfoContextProvider>
+        </Route>
+        {/* <AuthRoute exact path='/home' component={Home} /> */}
+
+        <Route path='/write' component={BoardCreator} />
+        {/* <Route path='/mypage' component={MyPage} /> */}
+        {/* <Route path='/signup' component={SignUp} /> */}
+
+        <Route path='/mypage'>
+          <UserInfoContextProvider>
+            <MyPage />
+          </UserInfoContextProvider>
+        </Route>
+        <Route path='/signup'>
+          <UserInfoContextProvider>
+            <SignUp />
+          </UserInfoContextProvider>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default Routes;

src/apis/auth.js

@@ -0,0 +1,29 @@
+import axios from 'axios';
+
+export const postNewToken = ({ refreshToken }) => {
+  return axios
+    .post('http://localhost:8080/api/v1/auth/refreshtoken', {
+      refreshToken: refreshToken,
+    })
+    .then((res) => {
+      if (res.code) {
+        return res.code;
+      } else {
+        // localStorage.setItem('aToken', res.data.accessToken);
+        localStorage.setItem('rToken', res.data.refreshToken);
+        return 'success';
+      }
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};

src/apis/board.js

@@ -0,0 +1,58 @@
+import client from 'apis/client';
+
+export const postSaveBoard = ({ title, content, createdDateTime }) => {
+  return client
+    .post('/api/v1/boards', {
+      title,
+      content,
+      createdDateTime,
+    })
+    .then((res) => {
+      console.log(res);
+      if (res.code) {
+        return res.code;
+      }
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};
+
+export const getBoards = ({ lastBoardId, size }) => {
+  return client
+    .get(`/api/v1/boards`, {
+      params: {
+        lastBoardId,
+        size,
+      },
+    })
+    .then((res) => {
+      console.log(res);
+      if (res.code) {
+        return res.code;
+      }
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};

src/apis/client.js

@@ -0,0 +1,23 @@
+import axios from 'axios';
+
+const client = axios.create({
+  // baseURL: 'http://3.37.63.30',
+  baseURL: 'http://localhost:8080',
+});
+
+client.interceptors.request.use(
+  (config) => {
+    let aToken = localStorage.getItem('aToken');
+    if (aToken) {
+      config.headers.Authorization = `Bearer ${aToken}`;
+    } else {
+      console.log('Token이 존재하지 않음 -> 로그인 필요');
+    }
+    console.log(config.headers);
+    return config;
+  },
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+export default client;

src/apis/member.js

@@ -0,0 +1,128 @@
+import client from 'apis/client';
+import axios from 'axios';
+export const postMemberLogin = ({ alias, password }) => {
+  console.log(alias, password);
+  return client
+    .post('/api/v1/auth/login', {
+      alias,
+      password,
+    })
+    .then((res) => {
+      console.log(res);
+
+      return res.data;
+    })
+    .catch((error) => {
+      if (error.response) {
+        // 요청이 이루어졌으며 서버가 2xx의 범위를 벗어나는 상태 코드로 응답했습니다.
+        console.log(error.response.data); // {code: "M001"}
+        console.log(error.response.status); // 400
+        return error.response.data;
+      } else if (error.request) {
+        // 요청이 이루어 졌으나 응답을 받지 못했습니다.
+        // `error.request`는 브라우저의 XMLHttpRequest 인스턴스 또는
+        // Node.js의 http.ClientRequest 인스턴스입니다.
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        // 오류를 발생시킨 요청을 설정하는 중에 문제가 발생했습니다.
+        console.log('Error', error.message);
+      }
+    });
+};
+
+export const postMemberSignUp = ({ alias, password, name, email, phone, createdDateTime }) => {
+  console.log(createdDateTime);
+  return axios
+    .post('http://localhost:8080/api/v1/members/join', {
+      alias,
+      password,
+      name,
+      email,
+      phone,
+      createdDateTime,
+    })
+    .then((res) => {
+      console.log(res);
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};
+
+// 조회는 서버측에서 Path Variable 을 바꾼거 같음?
+export const getMemberSelect = ({ memberId }) => {
+  return client
+    .get(`/api/v1/members`)
+    .then((res) => {
+      console.log(res);
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};
+
+export const putMemberPasswordUpdate = ({ password }) => {
+  return client
+    .put(`/api/v1/members/password`, {
+      password,
+    })
+    .then((res) => {
+      console.log(res);
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};
+
+// 회원 탈퇴? 요청에 아무것도 필요 없나??
+export const deleteMember = () => {
+  return client
+    .delete('api/v1/members')
+    .then((res) => {
+      console.log(res);
+      return res;
+    })
+    .catch((error) => {
+      if (error.response) {
+        console.log(error.response.data);
+        console.log(error.response.status);
+        return error.response.data;
+      } else if (error.request) {
+        console.log(error.request);
+        return 'Server Error';
+      } else {
+        console.log('Error', error.message);
+      }
+    });
+};