Merge pull request #201 from hhbb0081/test

Feat: 영수증 선택 기준 idx로 변경
readyvery · Mar 26, 2024 · 488f0ef · 488f0ef
2 parents 30d4305 + b5bafe2
commit 488f0ef
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 65 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,6 +3,7 @@ import { Navigate, Route, Routes, useLocation } from "react-router-dom";
 // import Header2 from "../src/components/views/Header/Header2";
 // import Auth from "./hoc/auth.jsx";
 import ApplicationForm from "./components/signup/ApplicationForm/ApplicationForm.jsx";
+import Auth from "./hoc/Auth.jsx";
 import FindIdPage from "./pages/Find/FindIdPage/FindIdPage.jsx"; //아이디 찾기-전화번호 인증
 import NoneFindIdPage from "./pages/Find/FindIdPage/NoneFindIdPage/NoneFindIdPage.jsx"; //아이디 찾기 결과-회원 X
 import UserFindIdPage from "./pages/Find/FindIdPage/UserFindIdPage/UserFindIdPage.jsx"; //아이디 찾기 결과-아이디 반환
@@ -22,24 +23,23 @@ import SignupPage from "./pages/Signup/SignupPage.jsx";
 import TermsPage from "./pages/Signup/Terms/TermsPage.jsx";
 import VerificationPage from "./pages/Signup/Verification/VerificationPage.jsx";
 import StoreManage from "./pages/StoreManage/StoreManage.jsx";
-import Auth from "./utils/Auth.jsx";
 
 function App() {
   //const [cookies, , removeCookies] = useCookies();
   let location = useLocation();
 
   // 로그인 필요없는 페이지
   // sms인증 구현으로 인한 AUTH잠시 해제
-  // const NewSignupPage = Auth(SignupPage, false); // 회원가입
+  const NewSignupPage = Auth(SignupPage, false); // 회원가입
   const NewLoginPage = Auth(LoginPage, false); // 로그인
   // sms인증 구현으로 인한 AUTH잠시 해제
-  // const NewFindIdPage = Auth(FindIdPage, false); //아이디 찾기-전화번호 인증
+  const NewFindIdPage = Auth(FindIdPage, false); //아이디 찾기-전화번호 인증
   const NewNoneFindIdPage = Auth(NoneFindIdPage, false); //아이디 찾기 결과-회원 X
   const NewUserFindIdPage = Auth(UserFindIdPage, false); //아이디 찾기 결과-아이디 반환
   const NewFindPasswordPage = Auth(FindPasswordPage, false); //비밀번호 찾기 - 아이디 조회
   const NewChangeNewPasswordPage = Auth(ChangeNewPasswordPage, false); //비밀번호 변경 - 전화번호 인증
   const NewChangePasswordPage = Auth(ChangePasswordPage, false); //비밀번호 변경 - 전화번호 인증
-  //const NewPhoneAuthPage = Auth(PhoneAuthPage, false); // 휴대폰 인증
+  const NewPhoneAuthPage = Auth(PhoneAuthPage, false); // 휴대폰 인증
   const NewTermsPage = Auth(TermsPage, false); // 이용약관 페이지
 
   // 로그인 필수 페이지
@@ -50,7 +50,7 @@ function App() {
   const NewJudgeResultsRejectPage = Auth(JudgeResultsRejectPage, true, 3); // 입점 심사 반려 페이지
   const NewMainPage = Auth(MainPage, true, 4); // 메인페이지 (4, 5)
   const NewStoreManage = Auth(StoreManage, true, 4); // 매장관리 페이지 (4, 5)
-  // const NewOrderManagementPage = Auth(OrderManagePage, true, 5); // 주문관리
+  const NewOrderManagementPage = Auth(OrderManagePage, true, 5); // 주문관리
   const NewInventoryPage = Auth(InventoryPage, true, 5); // 재고관리
   const NewSalesPage = Auth(SalesManage, true, 5); // 매출관리
   const NewMyPage = Auth(MyPage, true, 5); // 마이페이지
@@ -60,7 +60,7 @@ function App() {
       <div>
         <div className="App">
           <Routes>
-            <Route path="/" element={<LoginPage />} />
+            <Route path="/" element={<NewLoginPage />} />
             <Route path="/*" element={<Navigate to="/"></Navigate>}></Route>
           </Routes>
         </div>
@@ -73,13 +73,12 @@ function App() {
         <Routes>
           <Route path="/main" element={<NewMainPage />} />
           <Route path="/store" element={<NewStoreManage />} />
-          <Route path="/order" element={<OrderManagePage />} />
+          <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/auth/phone" element={<PhoneAuthPage />} />
+          <Route path="/signup" element={<NewSignupPage />} />
+          <Route path="/signup/auth/phone" element={<NewPhoneAuthPage />} />
           <Route
             path="/signup/auth/verification"
             element={<NewVerificationPage />}
@@ -95,7 +94,7 @@ function App() {
             element={<NewJudgeResultsRejectPage />}
           />
           <Route path="/login" element={<NewLoginPage />} />
-          <Route path="/find/id" element={<FindIdPage />} />
+          <Route path="/find/id" element={<NewFindIdPage />} />
           <Route path="/find/id/search" element={<NewUserFindIdPage />} />
           <Route path="/find/id/none" element={<NewNoneFindIdPage />} />
           <Route path="/find/password" element={<NewFindPasswordPage />} />

diff --git a/src/components/views/Home/OrderContainer.jsx b/src/components/views/Home/OrderContainer.jsx
@@ -18,7 +18,7 @@ export default function OrderContainer () {
     // console.log(completeData);
 
     const handleOrderMenu = (dummyInfo, e) => {
-        const selectedMenu = dummyInfo.orders.filter((order) => order.orderNum === e);
+        const selectedMenu = dummyInfo.orders.filter((order) => order.idx === e);
         context.setSelectedMenu(e !== context.selectedIdx ? selectedMenu : {});
         context.setSelectedIdx(e !== context.selectedIdx ? e : 0);
     }
@@ -36,12 +36,12 @@ export default function OrderContainer () {
                     <OrderBoxWrapper>
                         {
                             waitData && waitData?.data?.orders?.map((item) => (
-                                <span onClick={() => handleWaitOrderMenu(item.orderNum)}>
+                                <span onClick={() => handleWaitOrderMenu(item.idx)}>
                                     <OrderBox 
                                         id={item.orderNum}
                                         category={item.pickUp}
                                         menu={item.foodies}
-                                        clicked={item.orderNum === context.selectedIdx}
+                                        clicked={item.idx === context.selectedIdx}
                                     />
                                 </span>
                             ))
@@ -53,12 +53,12 @@ export default function OrderContainer () {
                     <OrderBoxWrapper>
                     {
                         makeData && makeData?.data?.orders?.map((item) => (
-                            <span onClick={() => handleMakeOrderMenu(item.orderNum)}>
+                            <span onClick={() => handleMakeOrderMenu(item.idx)}>
                                 <OrderBox 
                                     id={item.orderNum}
                                     category={item.pickUp}
                                     menu={item.foodies}
-                                    clicked={item.orderNum === context.selectedIdx}
+                                    clicked={item.idx=== context.selectedIdx}
                                 />
                             </span>
                         ))
@@ -70,12 +70,12 @@ export default function OrderContainer () {
                 <>
                     {
                         completeData && completeData?.data?.orders?.map((item) => (
-                            <span onClick={() => handleCompleteOrderMenu(item.orderNum)}>
+                            <span onClick={() => handleCompleteOrderMenu(item.idx)}>
                                 <OrderBox 
                                     id={item.orderNum}
                                     category={item.pickUp}
                                     menu={item.foodies}
-                                    clicked={item.orderNum === context.selectedIdx}
+                                    clicked={item.idx === context.selectedIdx}
                                 />
                             </span>
                         ))
@@ -90,6 +90,13 @@ const Container = styled.div`
   width: 100%;
   height: calc(100% - 60px);
   overflow-y: auto;
+
+//   -ms-overflow-style: none; /* 인터넷 익스플로러 */
+//     scrollbar-width: none; /* 파이어폭스 */
+
+//     &::-webkit-scrollbar {
+//         display: none;
+//     }
 `;
 
 const OrderBoxContainer = styled.div`
@@ -118,10 +125,10 @@ const OrderBoxWrapper = styled.div`
     overflow-y: auto;
     padding-bottom: 50px;
 
-    -ms-overflow-style: none; /* 인터넷 익스플로러 */
-    scrollbar-width: none; /* 파이어폭스 */
+    // -ms-overflow-style: none; /* 인터넷 익스플로러 */
+    // scrollbar-width: none; /* 파이어폭스 */
 
-    &::-webkit-scrollbar {
-        display: none;
-    }
-`;
+    // &::-webkit-scrollbar {
+    //     display: none;
+    // }
+`;
diff --git a/src/components/views/Home/ReciptBox.jsx b/src/components/views/Home/ReciptBox.jsx
@@ -17,7 +17,6 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
 
     // 주문 거부
     const handleCancel = async (e) => {
-      // setLoading(1);
       console.log(e);
       message.loading("로딩 중...");
 
@@ -26,20 +25,21 @@ export default function ReceiptBox ({children, modalIdx, setModalIdx}) {
       );
 
       setModalIdx(0);
-      // setLoading(0);
+      context.setSelectedMenu({});
+      context.setSelectedIdx(0);
     };
 
     // 주문 접수
     const handleMake = async (e) => {
-      // setLoading(2);
       console.log(context?.selectedMenu);
       message.loading("로딩 중...");
 
       await acceptOrder(
         `${context?.selectedMenu[0]?.orderId}@${e}`, 
       );
       setModalIdx(0);
-      // setLoading(0);
+      context.setSelectedMenu({});
+      context.setSelectedIdx(0);
     };
 
     const selectedInfo = context.selectedMenu;

diff --git a/src/utils/Auth.jsx → src/hoc/Auth.jsx b/src/utils/Auth.jsx → src/hoc/Auth.jsx
diff --git a/src/utils/EffectSound.jsx → src/hoc/EffectSound.jsx b/src/utils/EffectSound.jsx → src/hoc/EffectSound.jsx
diff --git a/src/hooks/Mypage/useMypageLogout.jsx b/src/hooks/Mypage/useMypageLogout.jsx
@@ -1,8 +1,9 @@
 import { message } from "antd";
 import axios from "axios";
+import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import { useSetRecoilState } from "recoil";
-import { isAuthenticatedState, loginState } from "../../Atom/status";
+import { isAuthenticatedState } from "../../Atom/status";
 
 // 수정필요! 백에서 로그아웃이 구현되면 ㄱㄱ
 const apiRoot = process.env.REACT_APP_API_ROOT;
@@ -11,9 +12,9 @@ const apiUrl = `${apiRoot}/${apiVer}/user/logout`;
 
 const useMypageLogout = () => {
   const navigate = useNavigate();
-  const setIsLoggedIn = useSetRecoilState(loginState);
   const token = localStorage.getItem("accessToken");
   const setIsAuthenticated = useSetRecoilState(isAuthenticatedState);
+  const [, , removeCookie] = useCookies(["accessToken", "refreshToken", "JSESSIONID"]);
   // 반환된 함수가 실제로 호출되면 로그아웃을 수행
   const isTokenLogout = async () => {
     //   로컬스토리지에 엑세스토큰 저장시에.
@@ -24,14 +25,15 @@ const useMypageLogout = () => {
     };
     try {
       const response = await axios.get(apiUrl, config);
-      console.log(response);
-      setIsAuthenticated(false);
-      setIsLoggedIn({
-        accessToken: null,
-        expiredTime: null,
-      });
-      localStorage.removeItem("accessToken", "");
-      message.success("로그아웃에 성공하셨습니다.");
+      if(response.status === 200){
+        console.log(response);
+        setIsAuthenticated(false);
+        localStorage.clear();
+        removeCookie("JSESSIONID");
+        removeCookie("accessToken");
+        removeCookie("refreshToken");
+        message.success("로그아웃에 성공하셨습니다.");
+      }
       navigate("/");
     } catch (error) {
       message.info("관리자에게 문의하세요.");

diff --git a/src/pages/Login/LoginPage.jsx b/src/pages/Login/LoginPage.jsx
@@ -2,6 +2,7 @@ import { message } from "antd";
 import axios from "axios";
 import moment from "moment";
 import { useEffect, useState } from "react";
+import { useCookies } from "react-cookie";
 import { useNavigate } from "react-router-dom";
 import Container from "../../components/login/Container/Container";
 import RedButton from "../../components/login/redButton/RedButton";
@@ -21,6 +22,7 @@ const LoginFindUserIdAndPassword = () => {
 };
 
 function LoginPage() {
+  const [, , removeCookie] = useCookies(["accessToken"]);
   const [is480, setIs480] = useState(window.innerWidth <= 480);
   const containerSize = is480
     ? ["25rem", "37.5rem", "4.12rem", "3.63rem"]
@@ -78,6 +80,7 @@ function LoginPage() {
         // 로그인 성공: Recoil에 AT와 만료시간 저장
         localStorage.setItem("accessToken", response.data.accessToken);
         localStorage.setItem("expiredTime", moment().add(1, "days").format("yyyy-MM-DD HH:mm:ss")); // 만료시간 저장
+        removeCookie("accessToken");
         console.log("로그인 성공:", response.data);
         message.success("로그인에 성공하셨습니다!");
 

diff --git a/src/util/commonApis.jsx b/src/util/commonApis.jsx
@@ -1,5 +1,5 @@
 import axios from "axios";
-import moment from "moment";
+import { useNavigate } from "react-router-dom";
 
 const commonApis = axios.create({
     baseURL: process.env.REACT_APP_API_ROOT + "/api/v1",
@@ -26,37 +26,38 @@ commonApis.interceptors.response.use(
     (res) => { return res },
     (err) => {
         const {
-            config,
+            // config,
             response,
         } = err;
+        const navigate = useNavigate();
         console.log(err);
         // access token 만료 시
         if (response?.status === 403) {
-            axios.get(process.env.REACT_APP_API_ROOT + "/api/v1/refresh/token", {
-                withCredentials: true
-            })
-            .then((res) => {
-                console.log(res);
-                const accessToken = res.data.accessToken;
-                // console.log('accessToken: ', accessToken);
-                if(accessToken){
-                    console.log("access token 재설정!");
-                    console.log(accessToken);
-                    localStorage.setItem('accessToken', accessToken);
-                    localStorage.setItem("expiredTime", moment().add(1, "days").format("yyyy-MM-DD HH:mm:ss"))
-                    axios.defaults.headers.common.Authorization = "Bearer " + accessToken;
-                    config.headers.common["Authorization"] = "Bearer " + accessToken;
-                }
-                return axios(config);
-            })
-            .catch((e) => {
-                if (e?.response?.status === 401 || e?.response?.status === 403){
-                    // 로그인 페이지로 이동
-                    window.location.href = "/login";
-                    alert('로그인을 다시 진행해 주세요.');
-                }
-            });
-            return config;
+            navigate("/");
+            // axios.get(process.env.REACT_APP_API_ROOT + "/api/v1/refresh/token", {
+            //     withCredentials: true
+            // })
+            // .then((res) => {
+            //     console.log(res);
+            //     const accessToken = res.data.accessToken;
+            //     // console.log('accessToken: ', accessToken);
+            //     if(accessToken){
+            //         console.log("access token 재설정!");
+            //         console.log(accessToken);
+            //         localStorage.setItem('accessToken', accessToken);
+            //         localStorage.setItem("expiredTime", moment().add(1, "days").format("yyyy-MM-DD HH:mm:ss"))
+            //         axios.defaults.headers.common.Authorization = "Bearer " + accessToken;
+            //         config.headers.common["Authorization"] = "Bearer " + accessToken;
+            //     }
+            //     return axios(config);
+            // })
+            // .catch((e) => {
+            //     if (e?.response?.status === 401 || e?.response?.status === 403){
+            //         // 로그인 페이지로 이동
+            //         window.location.href = "/login";
+            //     }
+            // });
+            // return config;
         }
         return Promise.reject(err);
     }