diff --git a/src/App.css b/src/App.css index a4fe4bf..2f9a028 100644 --- a/src/App.css +++ b/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"); -} \ No newline at end of file +} diff --git a/src/App.js b/src/App.js index 1e8c07b..c2ca8ab 100644 --- a/src/App.js +++ b/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() { Loading...}> } /> - } /> + } /> } /> } /> } /> - } /> + } /> {/* 추가 */} } /> - } /> + } + /> } /> } /> - } /> - } /> + } + /> + } + /> } /> } /> } /> } /> } /> - } /> - } /> + } + /> + } + /> }> diff --git a/src/assets/icons/Header/ic_round-menu.svg b/src/assets/icons/Header/ic_round-menu.svg new file mode 100644 index 0000000..d31880d --- /dev/null +++ b/src/assets/icons/Header/ic_round-menu.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/views/Header/Header480.jsx b/src/components/views/Header/Header480.jsx new file mode 100644 index 0000000..aa78872 --- /dev/null +++ b/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 ( +
+ menu +
+ logo +
+
+ menu +
+
+ ); +}; diff --git a/src/pages/Home/Home.css b/src/pages/OrderManage/Home.css similarity index 100% rename from src/pages/Home/Home.css rename to src/pages/OrderManage/Home.css diff --git a/src/pages/Home/Home.jsx b/src/pages/OrderManage/Home.jsx similarity index 99% rename from src/pages/Home/Home.jsx rename to src/pages/OrderManage/Home.jsx index 0becb35..2f3c388 100644 --- a/src/pages/Home/Home.jsx +++ b/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"; diff --git a/src/pages/Home/MainHome.css b/src/pages/OrderManage/MainHome.css similarity index 100% rename from src/pages/Home/MainHome.css rename to src/pages/OrderManage/MainHome.css diff --git a/src/pages/Home/MainHome.jsx b/src/pages/OrderManage/MainHome.jsx similarity index 100% rename from src/pages/Home/MainHome.jsx rename to src/pages/OrderManage/MainHome.jsx diff --git a/src/pages/Home/Receipt/Receipt.css b/src/pages/OrderManage/Receipt/Receipt.css similarity index 100% rename from src/pages/Home/Receipt/Receipt.css rename to src/pages/OrderManage/Receipt/Receipt.css diff --git a/src/pages/Home/Receipt/Receipt.jsx b/src/pages/OrderManage/Receipt/Receipt.jsx similarity index 100% rename from src/pages/Home/Receipt/Receipt.jsx rename to src/pages/OrderManage/Receipt/Receipt.jsx diff --git a/src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx b/src/pages/OrderManage/Receipt/StatusReceipt/CompleteReceipt.jsx similarity index 100% rename from src/pages/Home/Receipt/StatusReceipt/CompleteReceipt.jsx rename to src/pages/OrderManage/Receipt/StatusReceipt/CompleteReceipt.jsx diff --git a/src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx b/src/pages/OrderManage/Receipt/StatusReceipt/PendingReceipt.jsx similarity index 100% rename from src/pages/Home/Receipt/StatusReceipt/PendingReceipt.jsx rename to src/pages/OrderManage/Receipt/StatusReceipt/PendingReceipt.jsx diff --git a/src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx b/src/pages/OrderManage/Receipt/StatusReceipt/PickUpAfterReceipt.jsx similarity index 100% rename from src/pages/Home/Receipt/StatusReceipt/PickUpAfterReceipt.jsx rename to src/pages/OrderManage/Receipt/StatusReceipt/PickUpAfterReceipt.jsx diff --git a/src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx b/src/pages/OrderManage/Receipt/StatusReceipt/ProgressReceipt.jsx similarity index 100% rename from src/pages/Home/Receipt/StatusReceipt/ProgressReceipt.jsx rename to src/pages/OrderManage/Receipt/StatusReceipt/ProgressReceipt.jsx diff --git a/src/pages/Home/StatusHome/Complete.jsx b/src/pages/OrderManage/StatusHome/Complete.jsx similarity index 100% rename from src/pages/Home/StatusHome/Complete.jsx rename to src/pages/OrderManage/StatusHome/Complete.jsx diff --git a/src/pages/Home/StatusHome/DetailHome.css b/src/pages/OrderManage/StatusHome/DetailHome.css similarity index 100% rename from src/pages/Home/StatusHome/DetailHome.css rename to src/pages/OrderManage/StatusHome/DetailHome.css diff --git a/src/pages/Home/StatusHome/Progress.jsx b/src/pages/OrderManage/StatusHome/Progress.jsx similarity index 100% rename from src/pages/Home/StatusHome/Progress.jsx rename to src/pages/OrderManage/StatusHome/Progress.jsx diff --git a/src/pages/Home/StatusHome/Wait.jsx b/src/pages/OrderManage/StatusHome/Wait.jsx similarity index 100% rename from src/pages/Home/StatusHome/Wait.jsx rename to src/pages/OrderManage/StatusHome/Wait.jsx