add react router

package.json

@@ -9,6 +9,7 @@
     "axios": "^0.26.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "semantic-ui-css": "^2.4.1",
     "semantic-ui-react": "^2.1.2",

src/App.js → src/App.jsx

@@ -1,5 +1,5 @@
-// import { useEffect } from 'react';
-// import Api from './api/Api';
+import { useEffect } from 'react';
+import Api from './api';
 
 import WantedList from './components/WantedList';
 import ListNavBar from './components/ListNavBar';
@@ -10,6 +10,7 @@ import kSoup from './assets/img/k-soup.png';
 import board2 from './assets/img/board2.jpg';
 import subway from './assets/img/subway.png';
 import walk from './assets/img/walk.jpg';
+import AddPostBtn from './components/AddPostBtn';
 
 const tempOriginal = [
   {
@@ -59,11 +60,12 @@ const tempWantedListData = [0, 1, 2, 3, 4, 5].reduce((prev, idx) => {
 }, []);
 
 function App() {
-  // useEffect(() => {
-  //   data = await Api.getCards(); <- 이런거 부르면됩니다.
-  // }, []);
+  useEffect(() => {
+    console.log(Api.getPosts()); // TODO: Post 업데이트
+  }, []);
   return (
     <div className="App">
+      <AddPostBtn />
       <ListNavBar />
       <WantedList list={tempWantedListData} />
     </div>

src/Routers.jsx

@@ -0,0 +1,33 @@
+import React, { createContext, useState, useMemo } from 'react';
+
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+
+import App from './App';
+import AddPost from './pages/AddPost';
+import Redirect from './pages/Redirect';
+
+export const UserContext = createContext({
+  token: '',
+  setToken: () => {},
+});
+
+const Routers = () => {
+  const [token, setToken] = useState('');
+
+  const value = useMemo(() => ({ token, setToken }), [token, setToken]);
+
+  return (
+    <UserContext.Provider value={value}>
+      <Router>
+        <Routes>
+          <Route path="/" element={<App />} />
+          <Route path="/redirect" element={<Redirect />} />
+          <Route path="/addpost" element={<AddPost />} />
+          {/* <Route  path="*" component={<404_page/>} /> */}
+        </Routes>
+      </Router>
+    </UserContext.Provider>
+  );
+};
+
+export default Routers;

src/api/config.js

@@ -1,5 +1,5 @@
 const config = {
-  API_SERVER: 'http://localhost:3000/api', // api server url
+  API_SERVER: 'http://3.39.151.74/api', // api server url
   BASE_URL: 'http://localhost:3000', // production url
 };
 

src/api/index.js

@@ -0,0 +1,108 @@
+import Interceptor from './Interceptor';
+import CONFIG from './config';
+
+class Api {
+  /**
+   *  User Login
+   *  @param {string}  redirect - url
+   *  @return {Object} response
+   *  @example
+   *  ``` json
+   *  {
+   *    "id": "UUID",
+   *    "dateTime": "datetime",
+   *    "success": true,
+   *    "response": "https://github.com/login/oauth/authorize?client_id=0c696e3a1df74b0acf03&redirect_uri=http://localhost:8080/api/oauth2/code/github?redirect=http://localhost:3000",
+   *    "error": null
+   *  }
+   *  ```
+   */
+  async signin() {
+    return await handlePromiseGet('/authenticate/github', {
+      redirect: CONFIG.BASE_URL,
+    });
+  }
+
+  /**
+   *  get Information of Posts
+   *  @param {Date} required_date - required_date of cards
+   *  @return {Object} response
+   *  @example
+   *  ``` json
+   *  {
+   *    "dateTime": "datetime",
+   *    "success": true,
+   *    "response": [{
+   *      "제목": "string",
+   *      "장소(optional)": "string",
+   *      "약속시간": "datetime",
+   *      "종류": "enum(밥|커피|술)",
+   *      "모집인원": "number",
+   *      "모집상태": "enum",
+   *     }],
+   *    "error": null
+   *  }
+   *  ```
+   */
+  async getPosts(tags) {
+    return await handlePromiseGet('/posts', tags ? { tag: tags } : {});
+  }
+
+  async pushPost(info) {
+    return await handlePromisePost('/posts', info);
+  }
+
+  async toggleEye() {
+    return await handlePromiseGet('/toggleEye');
+  }
+
+  async toggleHand() {
+    return await handlePromiseGet('/toggleHand');
+  }
+
+  // async addPost(post) {
+  //   return await handlePromisePost('/posts', post);
+  // }
+}
+
+export default new Api();
+
+/*
+  {headers: authHeader()}
+  Record<string, string>
+*/
+function authHeader(token) {
+  // eslint-disable-next-line no-unused-vars
+  return token
+    ? {
+        headers: { Authorization: token },
+      }
+    : {};
+}
+
+// eslint-disable-next-line no-unused-vars
+const handlePromiseGet = async (url, params = {}) => {
+  return new Promise((resolve, reject) => {
+    Interceptor.getInstance()
+      .get(CONFIG.API_SERVER + url, { params: params })
+      .then((res) => res.data)
+      .then((res) => {
+        if (!res.error) resolve(res.data);
+        throw new Error(res.error);
+      })
+      .catch((e) => reject(e));
+  });
+};
+
+const handlePromisePost = async (url, params = {}, token = '') => {
+  return new Promise((resolve, reject) => {
+    Interceptor.getInstance()
+      .post(CONFIG.API_SERVER + url, params, authHeader(token))
+      .then((res) => res.data)
+      .then((res) => {
+        if (!res.error) resolve(res.data);
+        throw new Error(res.error);
+      })
+      .catch((e) => reject(e));
+  });
+};

src/components/AddPostBtn/index.css

@@ -0,0 +1,7 @@
+#add_post {
+  position: fixed;
+  font-size: 3em;
+  right: 10px;
+  bottom: 10px;
+  cursor: pointer;
+}