Merge pull request #21 from hhbb0081/test

Feat: auth추가

.env

@@ -4,4 +4,5 @@ WDS_SOCKET_PORT=0
 NODE_PATH=src/
 REACT_APP_API_ROOT=http://localhost:8080
 REACT_APP_HOME_URL=http://localhost:3000
-REACT_APP_API_URL=http://readyvery.com/api/v1
+REACT_APP_API_URL=http://readyvery.com/api/v1
+REACT_APP_KAKAO_LOGIN=http://localhost:8080/oauth2/authorization/kakao

package.json

@@ -16,6 +16,7 @@
     "moment": "^2.29.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.9.1",
+    "react-cookie": "^6.1.1",
     "react-dom": "^18.2.0",
     "react-icons": "^4.11.0",
     "react-modal": "^3.16.1",

src/App.js

@@ -1,25 +1,63 @@
-import { Route, Routes } from "react-router-dom";
+import axios from 'axios';
+import React, { Suspense } from 'react';
+import { useCookies } from "react-cookie";
+import { Route, Routes, useNavigate } from "react-router-dom";
 import { RecoilRoot } from "recoil";
-import Inventory from "../src/pages/Inventory/Inventory";
+import InventoryPage from "../src/pages/Inventory/Inventory";
 import Mypage from "../src/pages/Mypage/Mypage";
-import Sales from "../src/pages/Sales/Sales";
+import SalesPage from "../src/pages/Sales/Sales";
 import "./App.css";
-import Home from "./pages/Home/Home";
+import Auth from "./hoc/auth.jsx";
+import useInterval from './hooks/useInterval.jsx';
+import HomePage from "./pages/Home/Home";
+import MainPage from "./pages/Main/MainPage.jsx";
 
 function App() {
+  const [cookies, , removeCookies] = useCookies();
+  const navigate = useNavigate();
+  const apiUrl = process.env.REACT_APP_API_ROOT;
+
+  const NewLoginPage = Auth(MainPage, false);
+  const NewHomePage = Auth(HomePage, true);
+  const NewInventoryPage = Auth(InventoryPage, true);
+  const NewSalesPage = Auth(SalesPage, true);
+  const NewMyPage = Auth(Mypage, true);
+
+  const expiredTime = 1000 * 60 * 60 * 24;
+  useInterval(() => {
+    if(
+      cookies.refreshToken !== 'undefined' &&
+      cookies.refreshToken !== undefined && 
+      cookies.refreshToken 
+    ){
+      const config = {
+        withCredentials: true,
+      }
+      axios.get(`${apiUrl}/api/v1/refresh/token`, config)
+        .then((response) => {
+          console.log(response);
+          if (!response.data) {
+              removeCookies();
+              navigate('/');
+          }
+        })
+        .catch((err) => {
+          navigate("/");
+        })
+    }
+  }, expiredTime - 60000);
   return (
     <div className="App">
       <RecoilRoot>
-        {/* <Header /> */}
-
+        <Suspense fallback={<div>Loading...</div>}>
         <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/Inventory" element={<Inventory />} />
-          <Route path="/Sales" element={<Sales />} />
-          <Route path="/Mypage" element={<Mypage />} />
+          <Route path="/" element={<NewLoginPage />} />
+          <Route path="/home" element={<NewHomePage />} />
+          <Route path="/Inventory" element={<NewInventoryPage />} />
+          <Route path="/Sales" element={<NewSalesPage />} />
+          <Route path="/Mypage" element={<NewMyPage />} />
         </Routes>
-
-        {/* <Footer /> */}
+        </Suspense>
       </RecoilRoot>
     </div>
   );

src/Atom/status.jsx

@@ -1,4 +1,5 @@
-import { atom } from "recoil";
+import axios from "axios";
+import { atom, selector } from "recoil";
 
 export const storeState = atom({
   key: "storeState", // 전역적으로 고유한 값
@@ -13,3 +14,58 @@ export const orderState = atom({
     complete: 0,
   },
 });
+
+export const isAuthenticatedState = atom({
+  key: 'isAuthenticatedState',
+  default: false,
+});
+
+export const getAuthenticatedSelector = selector({
+  key: 'auth/get',
+  get: async ({get}) => {
+    return get(isAuthenticatedState);
+  },
+
+  set: ({set}) => {
+    set(isAuthenticatedState, (currentValue) => !currentValue);
+  }
+})
+
+export const loginState = atom({
+  key: 'loginState',
+  default: {
+    accessToken: null,
+    expiredTime: null
+  },
+});
+
+export const userState = atom({
+  key: 'userState',
+  dafault: null,
+})
+
+export const getUserSelector = selector({
+  key: 'user/get',
+  get: async ({get, set}) => {
+    try{
+      const apiUrl = process.env.REACT_APP_API_ROOT;
+      const config = {
+        withCredentials: true
+      };
+      const response = await axios.get(`${apiUrl}/api/v1/auth`, config)
+      const userData = response.data;
+      // if (JSON.stringify(userState) !== JSON.stringify(userData)) {
+      //   // 다르면 userInfo 업데이트
+      //   // set(userState, userData);
+      // }
+      return userData;
+    } catch (err){
+        // 에러처리
+        return "404";
+    }
+  },
+
+  set: ({set}, newValue) => {
+    set(userState, newValue)
+  }
+})

src/components/views/NavBar/NavBar.css

@@ -1,6 +1,7 @@
 .navbar {
   width: 8.875rem;
-  height: 46.25rem;
+  /* height: 46.25rem; */
+  height: 45.75rem;
   /* height: 42.5rem; */
   background-color: #2e2d2d;