Merge pull request #98 from hhbb0081/test

Refactor: 주문관리 페이지 리팩토링
readyvery · Jan 21, 2024 · a0f84aa · a0f84aa
2 parents da1d94f + 58cc3fd
commit a0f84aa
Show file tree

Hide file tree

Showing 45 changed files with 1,465 additions and 1,783 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,24 +1,20 @@
-import { message } from "antd";
-import axios from "axios";
 import React, { Suspense } from "react";
 import {
   Navigate,
   Route,
   Routes,
-  useLocation,
-  useNavigate,
+  useLocation
 } from "react-router-dom";
 // import Header2 from "../src/components/views/Header/Header2";
-import NavBar from "../src/components/views/NavBar/NavBar";
-import InventoryPage from "../src/pages/Inventory/Inventory";
-import Mypage from "../src/pages/Mypage/Mypage";
-import SalesPage from "../src/pages/Sales/Sales";
-import "./App.css";
-import Auth from "./hoc/auth.jsx";
-import useInterval from "./hooks/useInterval.jsx";
-import OrderManage from "./pages/OrderManage/Home.jsx";
+// import Auth from "./hoc/auth.jsx";
+import Auth from "./utils/Auth.jsx";
 // import MainPage from "./pages/Main/MainPage.jsx";
 // 추가 페이지
+import InventoryPage from "./pages/Inventory/Inventory.jsx";
+import MyPage from "./pages/Mypage/Mypage.jsx";
+import OrderManagePage from "./pages/OrderManage/Order.jsx";
+import SalesPage from "./pages/Sales/Sales.jsx";
+
 import ApplicationForm from "./components/signup/ApplicationForm/ApplicationForm.jsx";
 import FindIdPage from "./pages/Find/FindIdPage/FindIdPage.jsx"; //아이디 찾기-전화번호 인증
 import NoneFindIdPage from "./pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx"; //아이디 찾기 결과-회원 X
@@ -36,52 +32,33 @@ import VerificationPage from "./pages/Signup/Verification/VerificationPage.jsx";
 
 function App() {
   //const [cookies, , removeCookies] = useCookies();
-  const navigate = useNavigate();
-  const apiUrl = process.env.REACT_APP_API_ROOT;
   let location = useLocation();
 
-  const NewLoginPage = Auth(LoginPage, false);
-  const NewOrderManagementPage = Auth(OrderManage, true);
-  const NewInventoryPage = Auth(InventoryPage, true);
-  const NewSalesPage = Auth(SalesPage, true);
-  const NewMyPage = Auth(Mypage, true);
+  // 로그인 필요없는 페이지
+  const NewSignupPage = Auth(SignupPage, false); // 회원가입
+  const NewLoginPage = Auth(LoginPage, false); // 로그인
+  const NewFindIdPage = Auth(FindIdPage, false); //아이디 찾기-전화번호 인증
+  const NewNoneFindIdPage = Auth(NoneFindIdPage, false); //아이디 찾기 결과-회원 X
+  const NewUserFindIdPage = Auth(UserFindIdPage, false); //아이디 찾기 결과-아이디 반환
+  const NewFindPasswordPage = Auth(FindPasswordPage, false); //비밀번호 찾기 - 아이디 조회
+
+  // 로그인 필수 페이지
+  // GUEST : 1, USER : 2, CEO : 3
+
+  const NewPhoneAuthPage = Auth(PhoneAuthPage, true, 1); // 휴대폰 인증
+  // 유저전용 메인페이지 (2)
+  // CEO전용 메인페이지 (3)
+  const NewOrderManagementPage = Auth(OrderManagePage, true, 3); // 주문관리
+  const NewInventoryPage = Auth(InventoryPage, true, 3); // 재고관리
+  const NewSalesPage = Auth(SalesPage, true, 3); // 매출관리
+  const NewMyPage = Auth(MyPage, true, 3); // 마이페이지
 
-  const expiredTime = 1000 * 60 * 60 * 24;
-  // const expiredTime = 65000;
-  useInterval(() => {
-    // console.log(cookies.refreshToken);
-    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();
-              navigate("/");
-            }
-          })
-          .catch((err) => {
-            message.info("토큰이 만료되었습니다. 로그인을 진행해주세요.");
-            navigate("/");
-          });
-      }
-    }
-  }, expiredTime - 60000);
   if (location.pathname === "/") {
     return (
       <div>
         <div className="App">
           <Routes>
-            <Route path="/" element={<NewLoginPage />} />
+            <Route path="/" element={<LoginPage />} />
             <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
           </Routes>
         </div>
@@ -91,20 +68,19 @@ function App() {
   return (
     <div className="App">
       {/* <Header2 /> */}
-      <nav>
+      {/* <nav>
         <NavBar />
-      </nav>
+      </nav> */}
 
       <Suspense fallback={<div>Loading...</div>}>
         <Routes>
-          <Route path="/" element={<NewLoginPage />} />
           <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={<NewSignupPage />} />
           {/* 추가 */}
-          <Route path="/signup/auth/phone" element={<PhoneAuthPage />} />
+          <Route path="/signup/auth/phone" element={<NewPhoneAuthPage />} />
           <Route
             path="/signup/auth/verification"
             element={<VerificationPage />}
@@ -119,11 +95,11 @@ function App() {
             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="/login" element={<NewLoginPage />} />
+          <Route path="/find/id" element={<NewFindIdPage />} />
+          <Route path="/find/id/serch" element={<NewUserFindIdPage />} />
+          <Route path="/find/id/none" element={<NewNoneFindIdPage />} />
+          <Route path="/find/password" element={<NewFindPasswordPage />} />
           <Route
             path="/find/password/change"
             element={<ChangePasswordPage />}
@@ -132,7 +108,7 @@ function App() {
             path="/find/password/change/user"
             element={<ChangeNewPasswordPage />}
           />
-          <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
+          {/* <Route path="/*" element={<Navigate to="/"></Navigate>}></Route> */}
         </Routes>
       </Suspense>
     </div>

diff --git a/src/Atom/order.jsx b/src/Atom/order.jsx
@@ -1,4 +1,8 @@
 import { atom } from "recoil";
+import { recoilPersist } from "recoil-persist";
+
+const { persistAtom } = recoilPersist();
+
 
 export const ordercnt = atom({
   key: "ordercnt",
@@ -23,3 +27,9 @@ export const selectTotal = atom({
   key: "selectTotal",
   default: [],
 });
+
+export const selectId = atom({
+  key: "selectId",
+  default: 0,
+  effects_UNSTABLE: [persistAtom],
+})
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -1,7 +1,7 @@
 import axios from "axios";
 import { atom, selector } from "recoil";
 import { recoilPersist } from 'recoil-persist';
-import { Refresh } from "../hoc/handleRefresh";
+import { Refresh } from "../util/handleRefresh";
 
 const { persistAtom } = recoilPersist();
 
@@ -112,51 +112,3 @@ export const getUserSelector = selector({
   },
   effects_UNSTABLE: [persistAtom],
 });
-
-// export const waitorderState = atom({
-//   key: "waitorderState",
-//   default: [],
-// });
-
-// export const selectWaitOrderState = selector({
-//   key: "selectWaitOrderState",
-//   get: ({ get }) => {
-//     return get(waitorderState);
-//   },
-
-//   set: ({ set }, newValue) => {
-//     set(waitorderState, newValue);
-//   },
-// });
-
-// export const makeorderState = atom({
-//   key: "makeorderState",
-//   default: [],
-// });
-
-// export const selectMakeOrderState = selector({
-//   key: "selectMakeOrderState",
-//   get: ({ get }) => {
-//     return get(makeorderState);
-//   },
-
-//   set: ({ set }, newValue) => {
-//     set(makeorderState, newValue);
-//   },
-// });
-
-// export const completeorderState = atom({
-//   key: "completeorderState",
-//   default: [],
-// });
-
-// export const selectCompleteOrderState = selector({
-//   key: "selectCompleteOrderState",
-//   get: ({ get }) => {
-//     return get(completeorderState);
-//   },
-
-//   set: ({ set }, newValue) => {
-//     set(completeorderState, newValue);
-//   },
-// });
diff --git a/src/assets/icons/icon_berry.png b/src/assets/icons/icon_berry.png
diff --git a/src/components/views/Header/Header.css b/src/components/views/Header/Header.css
@@ -1,7 +1,6 @@
 .header {
-  /* width: 100%; */
+  width: 100vw;
   min-width: 64rem;
-  /* min-width: 64rem; */
   height: 5.5rem;
   background-color: #2e2d2d;
 }
@@ -13,8 +12,9 @@
   left: 0;
   right: 0;
   /* min-width: 73.75rem; */
-  width: 64rem;
-  max-width: 64rem;
+  width: 100vw;
+  /* width: 64rem; */
+  /* max-width: 64rem; */
   height: 5.5rem;
   background-color: #2e2d2d;
   z-index: 101;
@@ -23,31 +23,45 @@
 .header2-wrapper {
   display: flex;
   justify-content: space-between;
+  height: 100%;
+  padding: 0 2.5rem;
 }
 
 .head-container2 {
-  width: 23.6rem;
+  width: 22rem;
   display: flex;
   justify-content: space-evenly;
 }
 
 .header-img-wrapper {
   display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.soundImg{
+  width: 2rem;
+  height: 1.71575rem;
+}
+
+.logo-wrapper{
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .LOGO {
   width: 19.1875rem;
   height: 4rem;
-  margin-left: 2.5rem;
-  margin-top: 1.25rem;
-  float: left;
 }
 
 .store-group {
   display: flex;
   flex-direction: row;
   object-fit: contain;
   align-items: center;
+  justify-content: center;
 }
 
 .store-img__wrapper {
@@ -57,7 +71,8 @@
 .header-font {
   color: #fff;
   font-size: 1.875rem;
-  font-family: "SemiBold";
+  font-family: "Pretendard";
+  font-weight: 600;
 }
 
 .head-container {

diff --git a/src/components/views/Header/Header2.jsx b/src/components/views/Header/Header2.jsx
@@ -42,7 +42,7 @@ const Header = () => {
   return (
     <div className="header2">
       <div className="header2-wrapper">
-        <div>
+        <div className="logo-wrapper">
           <img src={LOGO} className="LOGO" alt="LOGO" />
         </div>
         <div className="head-container2">
@@ -63,11 +63,11 @@ const Header = () => {
           )}
           {sound ? (
             <div className="header-img-wrapper">
-              <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" />
+              <img src={SoundOn} onClick={onClickHandler} alt="SoundOn" className="soundImg"/>
             </div>
           ) : (
             <div className="header-img-wrapper">
-              <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" />
+              <img src={SoundOff} onClick={onClickHandler} alt="SoundOff" className="soundImg" />
             </div>
           )}
         </div>

diff --git a/src/components/views/Header/Header480.jsx b/src/components/views/Header/Header480.jsx
@@ -1,7 +1,7 @@
 import menu from "../../../assets/icons/Header/ic_round-menu.svg";
 import logo from "../../../assets/icons/Header/LOGO.svg";
 
-const Header480 = () => {
+export default function Header480 () {
   return (
     <header className="header480">
       <img src={menu} alt="menu" />

diff --git a/src/components/views/Home/OrderBox.jsx b/src/components/views/Home/OrderBox.jsx
@@ -0,0 +1,40 @@
+import styled, { css } from "styled-components";
+import theme from "../../../style/theme/theme";
+
+export default function OrderBox ({ id, category, menu, clicked }) {
+    const menuLen = menu.length;
+    return(
+        <OrderBoxContainer clicked={clicked}>
+            <OrderBoxSpan width={"15%"} size="big" align="right">{id}</OrderBoxSpan>
+            <OrderBoxSpan width={"15%"} size="big" align="center">{category}</OrderBoxSpan>
+            <OrderBoxSpan width={"70%"} size="small" align="left">
+                {menuLen > 1 ? `${menu[0].name} 외 ${menuLen - 1}건` : menu[0].name}
+            </OrderBoxSpan>
+        </OrderBoxContainer>
+    )
+};
+
+const OrderBoxContainer = styled.div`
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    // border-top: 0.5px solid ${theme.colors.text};
+    border-bottom: 1px solid ${theme.colors.text};
+    display: flex;
+    background-color: ${(props) => props.clicked && theme.colors.clickColor};
+`;
+
+const OrderBoxSpan = styled.span`
+    text-align: ${(props) => props.align};;
+    color: ${theme.colors.title};
+    width: ${(props) => props.width};
+    ${(props) => props.size === "big" ? css`
+        font-size: 1rem;
+        font-family: "Pretendard";
+        font-weight: 800;
+    ` : css`
+        font-size: 0.8rem;
+        font-family: "Pretendard";
+        font-weight: 600;
+    `}
+`;