readyvery · marinesnow34 · Jan 15, 2024 · Jan 15, 2024
diff --git a/src/Atom/status.jsx b/src/Atom/status.jsx
@@ -1,6 +1,6 @@
 import axios from "axios";
 import { atom, selector } from "recoil";
-import { recoilPersist } from 'recoil-persist';
+import { recoilPersist } from "recoil-persist";
 
 const { persistAtom } = recoilPersist();
 
@@ -50,16 +50,17 @@ export const getUserSelector = selector({
     // 백엔드에서 사용자 정보 가져옴
     try {
       // 성공시 해당 정보 반환
-      const apiUrl = process.env.REACT_APP_API_ROOT;
+      const apiRoot = process.env.REACT_APP_API_ROOT;
+      const apiVer = "api/v1";
+      const apiUrl = `${apiRoot}/${apiVer}/auth`;
       const config = {
         withCredentials: true,
       };
-      const response = await axios.get(`${apiUrl}/api/v1/auth`, config)
+      const response = await axios.get(apiUrl, config);
       return response.data;
-
-      } catch (error) {
-        return "404";
-      }
+    } catch (error) {
+      return "404";
+    }
   },
 
   set: ({ set }, newValue) => {

diff --git a/src/components/views/Header/Header.jsx b/src/components/views/Header/Header.jsx
@@ -1,17 +1,48 @@
-import React from "react";
-import { Link, useLocation } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { Link, useLocation, useNavigate } from "react-router-dom";
 import cart_icon from "../../../assets/images/cart_icon.svg";
 import home_logo from "../../../assets/images/home_logo.svg";
 import home_logo_bk from "../../../assets/images/home_logo_bk.svg";
 import arrow from "../../../assets/images/icon_arrow.svg";
 import icon_bag from "../../../assets/images/icon_bag.svg";
 import close from "../../../assets/images/icon_close.svg";
 import "./Header.css";
+import { useRecoilValue } from "recoil";
+import { isAuthenticatedState } from "../../../Atom/status";
+import Modal from "../Modal/Modal";
+import TEXT from "../../../constants/text";
 
 const Header = ({ headerProps }) => {
+  const isAuth = useRecoilValue(isAuthenticatedState);
+  const [isOpen, setIsOpen] = useState(false);
+  const navigate = useNavigate();
   const location = useLocation();
   const isCartPage = location.pathname === "/cart";
 
+  const toggleModal = () => {
+    if (!isAuth) {
+      setIsOpen(!isOpen);
+    } else {
+      navigate(`/cart`);
+    }
+  };
+
+  useEffect(() => {
+    // 모달 상태가 변경될 때만 실행
+    if (isOpen && !isAuth) {
+      setIsOpen(true);
+    }
+  }, [isOpen, isAuth]);
+
+  const handleCartClick = () => {
+    toggleModal();
+  };
+
+  const handleCancel = () => {
+    setIsOpen(false);
+    navigate("/kakaoLogin");
+  };
+
   return (
     <>
       {/* headerProps가 주어진 경우 */}
@@ -83,11 +114,28 @@ const Header = ({ headerProps }) => {
             <img src={home_logo} alt="Logo" className="header-logo" />
           </Link>
           {/* 장바구니 (흰) */}
-          <Link to="/cart" className="header-cart">
+          {/* <Link to="/cart" className="header-cart">
             <img src={cart_icon} alt="CartIcon" className="cart-icon" />
-          </Link>
+          </Link> */}
+          <div onClick={handleCartClick} className="header-cart">
+            <img src={cart_icon} alt="CartIcon" className="cart-icon" />
+          </div>
         </header>
       )}
+
+      {isOpen && (
+        <Modal
+          setIsOpen={setIsOpen}
+          handleCancel={handleCancel}
+          title={TEXT.cartModal.split("\n").map((line, index) => (
+            <React.Fragment key={index}>
+              {line}
+              <br />
+            </React.Fragment>
+          ))}
+          subtitle={"로그인 후 장바구니를 담아주세요."}
+        />
+      )}
     </>
   );
 };

diff --git a/src/components/views/Modal/Modal.jsx b/src/components/views/Modal/Modal.jsx
@@ -1,7 +1,7 @@
 import berry from "../../../assets/images/berry.png";
 import "./Modal.css";
 
-const Modal = ({ setIsOpen, handleCancle, title, subtitle }) => {
+const Modal = ({ setIsOpen, handleCancel, title, subtitle }) => {
   return (
     <div className="modal-wrapper">
       <div className="modal-box">
@@ -17,7 +17,7 @@ const Modal = ({ setIsOpen, handleCancle, title, subtitle }) => {
           >
             취소
           </span>
-          <span className="modal-check-btn" onClick={handleCancle}>
+          <span className="modal-check-btn" onClick={handleCancel}>
             확인
           </span>
         </div>

diff --git a/src/components/views/NavBar/MenuBar.css b/src/components/views/NavBar/MenuBar.css
@@ -0,0 +1,50 @@
+/* MenuBar.css */
+
+.menu-bar {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  background-color: #ff3366;
+  height: 50px; /* 높이를 고정합니다 */
+  position: relative;
+}
+
+.menu-item {
+  color: white;
+  text-decoration: none;
+  font-size: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.menu-item-middle {
+  background-color: white;
+  color: #ff3366;
+  border-radius: 30px; /* 원하는 대로 볼록한 정도를 조절합니다 */
+  padding: 10px 20px;
+  position: relative;
+  top: -20px; /* 버튼을 위로 올립니다 */
+  z-index: 10;
+}
+
+.menu-bar::before,
+.menu-bar::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 20px; /* 메뉴 바 아래쪽의 높이를 조정합니다 */
+  background-color: #ff3366;
+  z-index: 5;
+}
+
+.menu-bar::before {
+  border-radius: 0 0 20px 20px; /* 왼쪽 아래 모서리를 둥글게 합니다 */
+}
+
+.menu-bar::after {
+  border-radius: 0 0 20px 20px; /* 오른쪽 아래 모서리를 둥글게 합니다 */
+}
diff --git a/src/components/views/NavBar/MenuBar.jsx b/src/components/views/NavBar/MenuBar.jsx
@@ -0,0 +1,29 @@
+// MenuBar.js
+
+import React from "react";
+import "./MenuBar.css"; // CSS 파일을 임포트합니다.
+
+const MenuBar = () => {
+  return (
+    <div className="menu-bar">
+      <a href="#" className="menu-item">
+        🔍
+      </a>
+      <a href="#" className="menu-item">
+        📄
+      </a>
+      <a href="#" className="menu-item menu-item-middle">
+        🏠
+      </a>{" "}
+      {/* 이 아이템이 볼록한 모양을 가집니다. */}
+      <a href="#" className="menu-item">
+        ❤️
+      </a>
+      <a href="#" className="menu-item">
+        👤
+      </a>
+    </div>
+  );
+};
+
+export default MenuBar;
diff --git a/src/components/views/PageComponent/OrderStatus.jsx b/src/components/views/PageComponent/OrderStatus.jsx
@@ -211,7 +211,7 @@ function OrderStatus() {
       {isOpen && (
         <Modal
           setIsOpen={setIsOpen}
-          handleCancle={handleCancel}
+          handleCancel={handleCancel}
           title={"주문을 취소하시겠습니까?"}
           subtitle={"확인 버튼을 누르시면, 주문이 취소됩니다."}
         />

diff --git a/src/constants/text.js b/src/constants/text.js
@@ -1,4 +1,6 @@
 const TEXT = {
+  cartModal: `로그인 하신 후 
+  이용해 주시기 바랍니다.`,
   cartModal400: `장바구니는
   같은 가게의 메뉴만 담을 수 있어요.`,
   cartModal409: `장바구니는 동일한 

diff --git a/src/hoc/auth.jsx b/src/hoc/auth.jsx
@@ -15,7 +15,7 @@ function Auth(SpecificComponent, option) {
 
     useEffect(() => {
       console.log(cookies?.accessToken);
-      console.log(isAuth);
+      console.log("isAuth" + isAuth);
       if (!isAuth && cookies?.accessToken) {
         setIsAuth(true);
         message.success("로그인에 성공하셨습니다.");

diff --git a/src/hooks/useFetchQuickOrder.jsx b/src/hooks/useFetchQuickOrder.jsx
@@ -3,6 +3,7 @@ import axios from "axios";
 
 const apiRoot = process.env.REACT_APP_API_ROOT;
 const apiVer = "api/v1";
+const apiUrl = `${apiRoot}/${apiVer}/order/history/fast`;
 
 const useFetchQuickOrder = (isAuth) => {
   const [quickOrder, setQuickOrder] = useState([]);
@@ -11,14 +12,18 @@ const useFetchQuickOrder = (isAuth) => {
     const fetchData = async () => {
       if (isAuth) {
         try {
-          const response = await axios.get(
-            `${apiRoot}/${apiVer}/order/history/fast`,
-            { withCredentials: true }
-          );
+          const response = await axios.get(apiUrl, { withCredentials: true });
           setQuickOrder(response.data.receipts?.reverse());
+          console.log(isAuth);
         } catch (error) {
+          console.log("isAuth0" + isAuth);
           console.error("Error fetching quick order data:", error);
         }
+      } else {
+        // isAuth가 false일 때 quickOrder 상태를 초기화합니다.
+        console.log(isAuth);
+
+        setQuickOrder([]);
       }
     };
 

diff --git a/src/pages/HomePage/Homepage.jsx b/src/pages/HomePage/Homepage.jsx
@@ -76,7 +76,7 @@ function Homepage() {
         {notLoggedInbannerClick && (
           <Modal
             setIsOpen={setnotLoggedInbannerClick} // 취소(모달창 닫기)
-            handleCancle={handleCancel} // 확인(카카오 로그인하기로 이동)
+            handleCancel={handleCancel} // 확인(카카오 로그인하기로 이동)
             title={<div dangerouslySetInnerHTML={{ __html: loginText }} />}
             subtitle="로그인 후 쿠폰받기를 계속 진행해주세요."
           />

diff --git a/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx b/src/pages/MyPage/MyprofilePage/MyprofilePage.jsx
@@ -69,15 +69,15 @@ function MyprofilePage() {
           {isOpen && (
             <Modal
               setIsOpen={setIsOpen}
-              handleCancle={logout}
+              handleCancel={logout}
               title="로그아웃 하시겠습니까?"
               subtitle=""
             />
           )}
           {isBye && (
             <Modal
               setIsOpen={setIsBye}
-              handleCancle={deleteAccount}
+              handleCancel={deleteAccount}
               title="계정탈퇴"
               subtitle={<div dangerouslySetInnerHTML={{ __html: byeText }} />}
             />

diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx
@@ -85,7 +85,7 @@ const OrderProcessPage = () => {
       });
   };
 
-  const handleCancle = () => {
+  const handleCancel = () => {
     setIsOpen((prev) => !prev);
 
     resetCart()
@@ -442,7 +442,7 @@ const OrderProcessPage = () => {
       {isOpen && (
         <Modal
           setIsOpen={setIsOpen}
-          handleCancle={handleCancle}
+          handleCancel={handleCancel}
           title={modalTitle.split("\n").map((line, index) => (
             <React.Fragment key={index}>
               {line}

diff --git a/src/pages/PaymentPage/Redirect/PaymentSuccessPage.jsx b/src/pages/PaymentPage/Redirect/PaymentSuccessPage.jsx
@@ -32,7 +32,7 @@ const PaymentSuccessPage = () => {
     }
   }, [paymentStatus, paymentMessage]);
 
-  const handleCancle = async () => {
+  const handleCancel = async () => {
     setIsOpen((prev) => !prev);
     navigate(-1);
   };
@@ -55,7 +55,7 @@ const PaymentSuccessPage = () => {
   //           isOpen && (
   //             <Modal
   //               setIsOpen={setIsOpen}
-  //               handleCancle={handleCancle}
+  //               handleCancel={handleCancel}
   //               title={"결제 실패"}
   //               subtitle={response.message}
   //             />
@@ -90,7 +90,7 @@ const PaymentSuccessPage = () => {
       {isOpen && (
         <Modal
           setIsOpen={setIsOpen}
-          handleCancle={handleCancle}
+          handleCancel={handleCancel}
           title={"결제 실패"}
           subtitle={paymentStatus.message}
         />