Merge pull request #17 from wecode-bootcamp-korea/fix/modifySecond

[50기 황수현]Modify : config API 수정 및 TOKEN 수정
wecode-bootcamp-korea · Nov 23, 2023 · fc766f3 · fc766f3
2 parents a9229c5 + 1fdc032
commit fc766f3
Show file tree

Hide file tree

Showing 12 changed files with 48 additions and 54 deletions.
diff --git a/public/images/OneBook_Landing_ver3.png b/public/images/OneBook_Landing_ver3.png
diff --git a/src/Router.js b/src/Router.js
@@ -4,20 +4,24 @@ import MenuWrapper from './components/MenuWrapper/MenuWrapper';
 import Main from './pages/Main/Main';
 import Login from './pages/Login/Login';
 import Setting from './pages/Setting/Setting';
+import Table from './pages/Table/Table';
 import UserSignUp from './pages/UserSignUp/UserSignUp';
 import Auth from './pages/Auth/Auth';
 
 const Router = () => {
   return (
     <BrowserRouter>
-      <Routes>
-        <Route path="/" element={<Main />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/setting" element={<Setting />} />
-        <Route path="/table" element={<Table />} />
-        <Route path="/user-signup" element={<UserSignUp />} />
-        <Route path="/users/auth" element={<Auth />} />
-      </Routes>
+      <MenuWrapper>
+        <Routes>
+          <Route path="/" element={<Login />} />
+          <Route path="/login" element={<Login />} />
+          <Route path="/main" element={<Main />} />
+          <Route path="/setting" element={<Setting />} />
+          <Route path="/table" element={<Table />} />
+          <Route path="/user-signup" element={<UserSignUp />} />
+          <Route path="/users/auth" element={<Auth />} />
+        </Routes>
+      </MenuWrapper>
     </BrowserRouter>
   );
 };

diff --git a/src/components/MenuBar/MenuBar.js b/src/components/MenuBar/MenuBar.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import API from '../../config';
 import './MenuBar.scss';
 
 const MenuBar = () => {
@@ -14,11 +15,11 @@ const MenuBar = () => {
     navigate('/');
   };
 
-  const token = localStorage.getItem('token');
+  const TOKEN = localStorage.getItem('TOKEN');
 
   // 로그아웃
   const logout = () => {
-    localStorage.removeItem('token');
+    localStorage.removeItem('TOKEN');
     localStorage.removeItem('userName');
     localStorage.removeItem('userRole');
     alert('로그아웃 되었습니다.');
@@ -36,11 +37,11 @@ const MenuBar = () => {
   ];
   // 사용자 정보(이름, 권한)
   useEffect(() => {
-    fetch('http://10.58.52.143:8000/users/info', {
+    fetch(`${API.UserInfo}`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((response) => response.json())

diff --git a/src/components/MenuWrapper/MenuWrapper.js b/src/components/MenuWrapper/MenuWrapper.js
@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import MenuBar from '../MenuBar/MenuBar';
 import './MenuWrapper.scss';
 
-const EXCEPTIONAL_PATH = ['/login', '/users/auth', '/Setting'];
+const EXCEPTIONAL_PATH = ['/login', '/users/auth', '/Setting', '/'];
 
 const MenuWrapper = ({ children }) => {
   const { pathname } = useLocation();

diff --git a/src/config.js b/src/config.js
@@ -3,6 +3,8 @@ const BASE_URL = 'http://43.202.56.239:8000/';
 const API = {
   Login: `${BASE_URL}/Login`,
   UserSignUp: `${BASE_URL}/users/update'`,
+  UserAuth: `${BASE_URL}/users/auth'`,
+  UserInfo: `${BASE_URL}/users/info'`,
   MainJoin: `${BASE_URL}/family/join`,
   MainCreate: `${BASE_URL}/family/book`,
   MainFlow: `${BASE_URL}/flow`,
@@ -12,6 +14,7 @@ const API = {
   SettingFlowType: `${BASE_URL}/flow-type`,
   SettingCategory: `${BASE_URL}/category`,
   SettingAuthCode: `${BASE_URL}/family/auth-code`,
+  TableFlow: `${BASE_URL}/flow`,
 };
 
 export default API;
diff --git a/src/pages/Auth/Auth.js b/src/pages/Auth/Auth.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { useNavigate, useParams, useLocation } from 'react-router-dom';
+import API from '../../config';
 
 const Auth = () => {
   const navigate = useNavigate();
@@ -9,7 +10,7 @@ const Auth = () => {
   const searchParams = new URLSearchParams(location.search);
   const codeKakao = searchParams.get('code');
 
-  fetch('http://10.58.52.202:8000/users/auth', {
+  fetch(`${API.UserAuth}`, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',

diff --git a/src/pages/Login/Login.js b/src/pages/Login/Login.js
@@ -9,13 +9,6 @@ const Login = () => {
       <div className="loginWrapper">
         <KakaoLogin />
       </div>
-      <div className="serviceInfoContainer">
-        <img
-          className="onebookLogo"
-          src="/images/OneBook_Logo_Small.png"
-          alt="OneBook"
-        />
-      </div>
     </div>
   );
 };

diff --git a/src/pages/Login/Login.scss b/src/pages/Login/Login.scss
@@ -4,30 +4,20 @@
   background-color: #fcfcfc;
   display: flex;
   justify-content: center;
-  align-items: center;
   margin: 0 auto;
-  flex-direction: column-reverse;
+  background: url(../../../public/images/OneBook_Landing_ver3.png);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  background-position: top center;
 
   .loginWrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 50%;
-  }
-
-  .serviceInfoContainer {
-    display: flex;
-    justify-content: center;
-    flex-direction: column;
-    align-items: center;
-    width: 80%;
-  }
-
-  .onebookLogo {
-    display: flex;
-    object-fit: contain;
-    flex-shrink: 1;
-    width: 480px;
-    margin-bottom: 30px;
+    align-self: end;
+    margin-bottom: 5%;
+    margin-right: 3%;
   }
 }
diff --git a/src/pages/Main/Main.js b/src/pages/Main/Main.js
@@ -82,15 +82,15 @@ const Main = () => {
   // 페이지 이동
   const navigate = useNavigate();
   // 토큰
-  const token = localStorage.getItem('token');
+  const TOKEN = localStorage.getItem('TOKEN');
 
   // 가계부 참여하기
   const goToJoin = () => {
     fetch(`${API.MainJoin}`, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
       body: JSON.stringify({ auth_code: verifycationCode }),
     })
@@ -111,7 +111,7 @@ const Main = () => {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((response) => response.json())
@@ -132,7 +132,7 @@ const Main = () => {
       method: 'POST',
       headers: {
         'Content-type': 'application/json;charset=utf-8',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
       body: JSON.stringify({
         type: divide,
@@ -161,7 +161,7 @@ const Main = () => {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json;charset=utf-8',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((response) => response.json())
@@ -178,7 +178,7 @@ const Main = () => {
         method: 'GET',
         headers: {
           'Content-Type': 'application/json;charset=utf-8',
-          authorization: `Bearer ${token}`,
+          authorization: `Bearer ${TOKEN}`,
         },
       },
     )

diff --git a/src/pages/Setting/Setting.js b/src/pages/Setting/Setting.js
@@ -28,7 +28,7 @@ const Setting = () => {
   });
   const navigate = useNavigate();
 
-  const token = localStorage.getItem('token');
+  const TOKEN = localStorage.getItem('TOKEN');
 
   const handleInfo = (name, value) => {
     setSettingInfo({ ...settingInfo, [name]: value });
@@ -56,7 +56,7 @@ const Setting = () => {
       method: 'post',
       headers: {
         'content-type': 'application/json',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
       body: JSON.stringify({
         type: settingInfo.type,
@@ -85,7 +85,7 @@ const Setting = () => {
       method: 'get',
       headers: {
         'content-type': 'application/json',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((res) => res.json())
@@ -95,7 +95,7 @@ const Setting = () => {
       method: 'get',
       headers: {
         'content-type': 'application/json',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((res) => res.json())
@@ -108,12 +108,12 @@ const Setting = () => {
       method: 'get',
       headers: {
         'content-type': 'application/json',
-        authorization: `Bearer ${token}`,
+        authorization: `Bearer ${TOKEN}`,
       },
     })
       .then((res) => res.json())
       .then((result) => setAuthCode(result.authCode));
-  }, [token]);
+  }, [TOKEN]);
 
   const filteredCategoryList = categoryList.filter(
     (category) => category.type === settingInfo.type,

diff --git a/src/pages/Table/Table.js b/src/pages/Table/Table.js
@@ -8,6 +8,7 @@
 import React, { useState, useEffect } from 'react';
 import AccountBook from './component/AccountBook';
 import TransactionModifyModal from './component/TransactionModifyModal';
+import API from '../../config';
 
 const Table = () => {
   const [transactions, setTransactions] = useState([]);
@@ -16,7 +17,7 @@ const Table = () => {
   const TOKEN = `Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJlbWFpbCI6InNpeHNsQGdtYWlsLmNvbSIsImlhdCI6MTcwMDY0NjMzMCwiZXhwIjo4NjQwMDE3MDA2NDYzMzB9.2O2PmUUJYAX3kG3_JYhfrXYhhv8CnilM5sx_qnDRu-g`;
 
   useEffect(() => {
-    fetch('http:/43.202.56.239:8000/flow', {
+    fetch(`${API.TableFlow}`, {
       method: 'GET',
       headers: {
         'Content-type': 'application/json',
@@ -29,7 +30,7 @@ const Table = () => {
   }, []);
 
   const deleteTransaction = (id) => {
-    fetch(`http:/43.202.56.239:8000/flow/${id}`, {
+    fetch(`${API.TableFlow}/${id}`, {
       method: 'DELETE',
       headers: {
         'Content-type': 'application/json',

diff --git a/src/pages/UserSignUp/UserSignUp.js b/src/pages/UserSignUp/UserSignUp.js
@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import API from '../../config';
 import './UserSignUp.scss';
 
 const UserSignUp = () => {
@@ -23,7 +24,7 @@ const UserSignUp = () => {
     } else if (birthdate.length !== 8) {
       alert('생년월일을 정확히 입력해주세요!');
     } else {
-      fetch('http:/43.202.56.239:8000/users/update', {
+      fetch(`${API.UserAuth}`, {
         method: 'PUT',
         headers: {
           'Content-type': 'application/json',