Merge pull request #96 from imi21123/test

Feat: HomePage router 변경

src/App.css

@@ -13,6 +13,88 @@
   }
 }
 
+@media only screen and (max-width: 480px) {
+  .App {
+    max-width: 480px;
+    background-color: white;
+    padding-top: 4rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  /* .bottom_navbar {
+    left: calc(50% - 207px);  
+    right: calc(50% - 207px);  
+  }
+  .bottom_navbar2 {
+    left: calc(50% - 207px);  
+    right: calc(50% - 207px);  
+  }
+
+  .top_header {
+    left: calc(50% - 207px);  
+    right: calc(50% - 207px);  
+  }
+
+  .top_header_page {
+    left: calc(50% - 207px);  
+    right: calc(50% - 207px);  
+  } */
+}
+
+@media only screen and (min-width: 480px) and (max-width: 768px) {
+  .App {
+    max-width: 768px;
+    background-color: white;
+    padding-top: 4rem;
+    margin-left: auto;
+    margin-right: auto;
+  }
+  /* .bottom_navbar {
+    left: calc(50% - 215px);  
+    right: calc(50% - 215px);  
+  }
+  .bottom_navbar2 {
+    left: calc(50% - 215px);  
+    right: calc(50% - 215px);  
+  }
+
+  .top_header {
+    left: calc(50% - 215px);  
+    right: calc(50% - 215px);  
+  }
+  .top_header_page {
+    left: calc(50% - 215px);  
+    right: calc(50% - 215px);  
+  } */
+}
+
+@media (min-width: 768px) {
+  .App {
+    width: 1024px;
+    background-color: white;
+    padding-top: 4rem;
+  }
+  /* .bottom_navbar {
+    left: calc(50% - 300px);  
+    right: calc(50% - 300px);  
+  }
+
+  .bottom_navbor2 {
+    left: calc(50% - 300px);  
+    right: calc(50% - 300px);  
+  }
+
+  .top_header {
+    left: calc(50% - 300px);  
+    right: calc(50% - 300px);  
+  }
+
+  .top_header_page {
+    left: calc(50% - 300px);  
+    right: calc(50% - 300px);  
+  } */
+}
+
 .App-header {
   background-color: #282c34;
   min-height: 100vh;
@@ -36,49 +118,6 @@
     transform: rotate(360deg);
   }
 }
-/* 
-@font-face {
-  font-family: "Bold";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-Bold.woff2");
-}
-
-@font-face {
-  font-family: "ExtraBold";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-ExtraBold.woff2");
-}
-
-@font-face {
-  font-family: "ExtraLight";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-ExtraLight.woff2");
-}
-
-@font-face {
-  font-family: "Light";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-Light.woff2");
-}
-
-@font-face {
-  font-family: "Medium";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-Medium.woff2");
-}
-
-@font-face {
-  font-family: "Regular";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-Regular.woff2");
-}
-
-@font-face {
-  font-family: "SemiBold";
-  font-display: swap;
-  src: url("/src/assets/font/Pretendard-SemiBold.woff2");
-} */
-
 
 @font-face {
   font-family: "Bold";
@@ -128,4 +167,4 @@
   font-display: swap;
   src: local("Pretendard"),
     url("./assets/font/Pretendard-SemiBold.woff2") format("woff2");
-}
+}

src/App.js

@@ -16,7 +16,7 @@ import SalesPage from "../src/pages/Sales/Sales";
 import "./App.css";
 import Auth from "./hoc/auth.jsx";
 import useInterval from "./hooks/useInterval.jsx";
-import HomePage from "./pages/Home/Home";
+import OrderManage from "./pages/OrderManage/Home.jsx";
 // import MainPage from "./pages/Main/MainPage.jsx";
 // 추가 페이지
 import ApplicationForm from "./components/signup/ApplicationForm/ApplicationForm.jsx";
@@ -41,7 +41,7 @@ function App() {
   let location = useLocation();
 
   const NewLoginPage = Auth(LoginPage, false);
-  const NewHomePage = Auth(HomePage, true); 
+  const NewOrderManagementPage = Auth(OrderManage, true);
   const NewInventoryPage = Auth(InventoryPage, true);
   const NewSalesPage = Auth(SalesPage, true);
   const NewMyPage = Auth(Mypage, true);
@@ -50,30 +50,30 @@ function App() {
   // const expiredTime = 65000;
   useInterval(() => {
     // console.log(cookies.refreshToken);
-    console.log(localStorage.accessToken)
+    console.log(localStorage.accessToken);
     if (
       localStorage.refreshToken !== "undefined" &&
       localStorage.refreshToken !== undefined &&
       localStorage.refreshToken
     ) {
-    if (localStorage.accessToken) {
-      const config = {
-        withCredentials: true,
-      };
-      axios
-        .get(`${apiUrl}/api/v1/refresh/token`, config)
-        .then((response) => {
-          console.log(response);
-          if (!response.data) {
-            localStorage.clear()
+      if (localStorage.accessToken) {
+        const config = {
+          withCredentials: true,
+        };
+        axios
+          .get(`${apiUrl}/api/v1/refresh/token`, config)
+          .then((response) => {
+            console.log(response);
+            if (!response.data) {
+              localStorage.clear();
+              navigate("/");
+            }
+          })
+          .catch((err) => {
+            message.info("토큰이 만료되었습니다. 로그인을 진행해주세요.");
             navigate("/");
-          }
-        })
-        .catch((err) => {
-          message.info("토큰이 만료되었습니다. 로그인을 진행해주세요.");
-          navigate("/");
-        });
-    }
+          });
+      }
     }
   }, expiredTime - 60000);
   if (location.pathname === "/") {
@@ -98,25 +98,40 @@ function App() {
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
           <Route path="/" element={<NewLoginPage />} />
-          <Route path="/home" element={<NewHomePage />} />
+          <Route path="/order" element={<NewOrderManagementPage />} />
           <Route path="/Inventory" element={<NewInventoryPage />} />
           <Route path="/Sales" element={<NewSalesPage />} />
           <Route path="/Mypage" element={<NewMyPage />} />
-          <Route path="/signup" element={<SignupPage />} /> 
+          <Route path="/signup" element={<SignupPage />} />
           {/* 추가 */}
           <Route path="/signup/auth/phone" element={<PhoneAuthPage />} />
-          <Route path="/signup/auth/verification" element={<VerificationPage />} />
+          <Route
+            path="/signup/auth/verification"
+            element={<VerificationPage />}
+          />
           <Route path="/signup/auth/terms" element={<TermsPage />} />
           <Route path="/signup/auth/results" element={<ApplicationForm />} />
-          <Route path="/signup/auth/results/before" element={<JudgeResultsBeforePage />} />
-          <Route path="/signup/auth/results/reject" element={<JudgeResultsRejectPage />} />
+          <Route
+            path="/signup/auth/results/before"
+            element={<JudgeResultsBeforePage />}
+          />
+          <Route
+            path="/signup/auth/results/reject"
+            element={<JudgeResultsRejectPage />}
+          />
           <Route path="/login" element={<LoginPage />} />
           <Route path="/find/id" element={<FindIdPage />} />
           <Route path="/find/id/serch" element={<UserFindIdPage />} />
           <Route path="/find/id/none" element={<NoneFindIdPage />} />
           <Route path="/find/password" element={<FindPasswordPage />} />
-          <Route path="/find/password/change" element={<ChangePasswordPage />} />
-          <Route path="/find/password/change/user" element={<ChangeNewPasswordPage />} />
+          <Route
+            path="/find/password/change"
+            element={<ChangePasswordPage />}
+          />
+          <Route
+            path="/find/password/change/user"
+            element={<ChangeNewPasswordPage />}
+          />
           <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
         </Routes>
       </Suspense>

src/components/views/Header/Header480.jsx

@@ -0,0 +1,16 @@
+import menu from "../../../assets/icons/Header/ic_round-menu.svg";
+import logo from "../../../assets/icons/Header/LOGO.svg";
+
+const Header480 = () => {
+  return (
+    <header className="header480">
+      <img src={menu} alt="menu" />
+      <div className="header__logo">
+        <img src={logo} alt="logo" />
+      </div>
+      <div className="header__menu">
+        <img src={menu} alt="menu" />
+      </div>
+    </header>
+  );
+};

src/pages/Home/Home.jsx → src/pages/OrderManage/Home.jsx

@@ -1,7 +1,6 @@
 import axios from "axios";
 import React, { useEffect, useState } from "react";
 import { useCookies } from "react-cookie";
-
 import { message } from "antd";
 import "./Home.css";
 import MainHome from "./MainHome";