Merge pull request #167 from readyvery/test

사진 변경, 이벤트 모달 추가

src/App.css

@@ -146,4 +146,4 @@
 @font-face {
   font-family: "KBold";
   src: url("./assets/font/Kotrahope-Bold.otf");
-} 
+}

src/App.js

@@ -3,7 +3,7 @@ import axios from "axios";
 import React, { Suspense } from "react";
 import { useCookies } from "react-cookie";
 import { Route, Routes, useNavigate } from "react-router-dom";
-import HomePage from "../src/pages/HomePage/Homepage";
+import { RecoilRoot } from "recoil";
 import MyPage from "../src/pages/MyPage/MyPage";
 import StoreDetailPage from "../src/pages/StoreDetailPage/StoreDetailPage";
 import "./App.css";
@@ -12,6 +12,7 @@ import Auth from "./hoc/auth";
 import useInterval from "./hooks/useInterval";
 import CafeSearchPage from "./pages/CafeSearch/CafeSearch";
 import CartPage from "./pages/CartPage/CartPage";
+import HomePage from "./pages/HomePage/Homepage";
 import KakaoLoginPage from "./pages/LoginPage/Login";
 import PolicyInLogin from "./pages/LoginPage/PolicyInLogin";
 import PrivacyPolicyLogin from "./pages/LoginPage/PrivacyPolicyLogin";
@@ -96,7 +97,14 @@ function App() {
 
   return (
     <div className="App">
-        <Suspense fallback={<div><img src={loading} alt="loading"/></div>}>
+      <RecoilRoot>
+        <Suspense
+          fallback={
+            <div>
+              <img src={loading} alt="loading" />
+            </div>
+          }
+        >
           <Routes>
             {/* 로그인 하지 않아도 볼 수 있는 페이지 */}
             {/* 메인페이지 */}
@@ -108,7 +116,10 @@ function App() {
             {/* 로그인*/}
             <Route path="/kakaologin" element={<NewLoginPage />} />
             <Route path="/policyinlogin" element={<PolicyInLogin />} />
-            <Route path="/privacypolicyinlogin" element={<PrivacyPolicyLogin />} />
+            <Route
+              path="/privacypolicyinlogin"
+              element={<PrivacyPolicyLogin />}
+            />
             {/* 마이페이지-약관정책 페이지 */}
             <Route path="/policy" element={<PolicyPage />} />
             <Route path="/termsofuse" element={<TermsOfUse />} />
@@ -154,6 +165,7 @@ function App() {
             <Route path="/payment/fail" element={<NewPaymentFailPage />} />
           </Routes>
         </Suspense>
+      </RecoilRoot>
     </div>
   );
 }

src/components/views/NavBar/NavBar.css

@@ -2,8 +2,7 @@
 .bottom_navbar {
   position: fixed;
   bottom: 0;
-  left: 0;
-  right: 0;
+
   height: 4.625rem; /*60px*/
   background-color: #d82356;
   z-index: 100;

src/components/views/NavBar/NavBar.jsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import styled, { keyframes } from "styled-components";
+import home_cherry from "../../../assets/images/home_cherry.png";
 import heart_icon from "../../../assets/images/icon_heart.svg";
-import home_icon2 from "../../../assets/images/icon_home2.svg";
 import list_icon from "../../../assets/images/icon_list.svg";
 import mypage_icon from "../../../assets/images/icon_mypage.svg";
 import search_icon from "../../../assets/images/icon_search.svg";
@@ -68,9 +68,10 @@ const NavBar = () => {
       >
         <NavColor>
           <img
-            src={home_icon2}
+            src={home_cherry}
             alt="HomeIcon"
             className={activeNav === 3 ? "nav-item active" : "nav-item"}
+            style={{ width: 56, height: 56 }}
           />
           <div
             className={

src/components/views/NavBar/NavBar2.jsx

@@ -1,6 +1,6 @@
 import React from "react";
+import home_cherry2 from "../../../assets/images/home_cherry2.png";
 import heart_icon from "../../../assets/images/icon_heart.svg";
-import home_icon from "../../../assets/images/icon_home.svg";
 import list_icon from "../../../assets/images/icon_list.svg";
 import mypage_icon from "../../../assets/images/icon_mypage.svg";
 import search_icon from "../../../assets/images/icon_search.svg";
@@ -30,7 +30,11 @@ const NavBar2 = () => {
       </nav>
 
       <nav className="link-instead">
-        <img src={home_icon} alt="HomeIcon" style={{ opacity: 1 }} />
+        <img
+          src={home_cherry2}
+          alt="HomeIcon"
+          style={{ opacity: 1, width: 70, height: 67 }}
+        />
         <div className="nav-item-home"></div>
       </nav>
 

src/components/views/PageComponent/OrderStatus.jsx

@@ -29,7 +29,7 @@ function OrderStatus() {
     MAKE: 1,
     COMPLETE: 2,
     PICKUP: 3,
-    CANCEL: 4
+    CANCEL: 4,
   };
 
   useEffect(() => {
@@ -56,7 +56,7 @@ function OrderStatus() {
     fetchData();
   };
 
-  const handleCancle = async() => {
+  const handleCancle = async () => {
     setIsOpen((prev) => !prev);
     const config = {
       withCredentials: true,
@@ -68,15 +68,19 @@ function OrderStatus() {
     // navigate("/orderHistory");
     setDegree(4);
 
-    const response = await axios
-      .post(`${apiUrl}/api/v1/order/toss/cancel`, body, config)
-    if(response.status === 200){
-      if(response.data.message === "취소 성공"){
+    const response = await axios.post(
+      `${apiUrl}/api/v1/order/toss/cancel`,
+      body,
+      config
+    );
+    if (response.status === 200) {
+      console.log(response);
+      if (response.data.message === "취소 성공") {
         message.success("주문 취소되었습니다.");
         fetchData();
         setDegree(4);
       }
-    } else{
+    } else {
       message.error("주문 취소에 실패하였습니다.");
     }
   };
@@ -90,37 +94,37 @@ function OrderStatus() {
             <Link to="/status" style={{ textDecoration: "none" }}>
               <img src={close} className="close-btn" alt={close} />
             </Link>
-          </div> 
+          </div>
         ) : (
-        <div className="status-nav-bar">
-          <Link to="/status" style={{ textDecoration: "none" }}>
-            <img src={close} className="close-btn" alt={close} />
-          </Link>
-          <img
-            src={refresh}
-            className="refresh-btn"
-            alt={refresh}
-            onClick={refreshDegree}
-          />
-        </div> 
+          <div className="status-nav-bar">
+            <Link to="/orderHistory" style={{ textDecoration: "none" }}>
+              <img src={close} className="close-btn" alt={close} />
+            </Link>
+            <img
+              src={refresh}
+              className="refresh-btn"
+              alt={refresh}
+              onClick={refreshDegree}
+            />
+          </div>
         )}
-        {degree !== 0 && degree !== 2 && degree !== 3 && degree !== 4 && (
+        {degree !== 0 && degree !== 2 && degree !== 4 && (
           <div className="status-time-wrapper">
             <div className="status-time">
               <div className="status-time-img__wrapper">
                 <img src={clock} alt={clock} />
               </div>
               <span>
                 <span style={{ color: "#D82356" }}>
-                  {
-                    moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
-                      moment(),
-                      "minutes"
-                    ) < 0 ? 0 : moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
-                      moment(),
-                      "minutes"
-                    )
-                  }
+                  {moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
+                    moment(),
+                    "minutes"
+                  ) < 0
+                    ? 0
+                    : moment(statusList?.estimatedTime, "HH:mm:ss.SSS").diff(
+                        moment(),
+                        "minutes"
+                      )}
                   분 후
                 </span>{" "}
                 수령 가능!
@@ -142,9 +146,8 @@ function OrderStatus() {
               <Progressbar degree={degree} />
             </div>
           </div>
-        ) : 
-          degree === 4 ? (
-            <div className="status-top-wrapper" style={{'height': "25vh"}}>
+        ) : degree === 4 ? (
+          <div className="status-top-wrapper" style={{ height: "25vh" }}>
             <div className="status-number-wrapper">
               <div className="logo-img-wrapper center">
                 <img src={cancleLogo} className="logo-img" alt={cancleLogo} />
@@ -156,7 +159,7 @@ function OrderStatus() {
               {/* <Progressbar degree={degree} /> */}
             </div>
           </div>
-          ) : (
+        ) : (
           <div className="status-top-wrapper">
             <div className="status-number-wrapper">
               <div className="logo-img-wrapper center">
@@ -168,8 +171,7 @@ function OrderStatus() {
               <Progressbar degree={degree} />
             </div>
           </div>
-          )
-        }
+        )}
         {degree !== 3 && (
           <div className="status-content-container">
             <div className="status-content-wrapper">
@@ -183,15 +185,15 @@ function OrderStatus() {
               </div>
             </div>
             <div className="status-detail__wrapper">
-            <div className="status-detail">
-              <Link
-                to={`/orderDetail?orderId=${orderId}`}
-                state={{ returnTo: `/status?orderId=${orderId}` }}
-                style={{ textDecoration: "none", color: "#000" }}
-              >
-                주문상세
-              </Link>
-            </div>
+              <div className="status-detail">
+                <Link
+                  to={`/orderDetail?orderId=${orderId}`}
+                  state={{ returnTo: `/orderHistory?orderId=${orderId}` }}
+                  style={{ textDecoration: "none", color: "#000" }}
+                >
+                  주문상세
+                </Link>
+              </div>
             </div>
             {degree === 4 && (
               <div className="status-content-wrapper">

src/components/views/Quickorder/QuickOrder.css

@@ -0,0 +1,65 @@
+/* 로그인 되어 있을 때 */
+.login-box {
+  width: 10.375rem;
+  height: 7rem;
+  box-shadow: 0.25px 0.25rem 0.2rem rgba(0, 0, 0, 0.2); /* 그림자 추가 */
+  border-radius: 0.5rem;
+  text-decoration: none;
+}
+.quick-order-item {
+  padding: 0 4rem 0 0;
+  width: 10.375rem;
+}
+
+.item-name {
+  color: #4f4f4f;
+  font-family: "Pretendard Variable";
+  font-weight: bold;
+  font-style: normal;
+  font-size: 0.9375rem;
+  margin: 1rem 7% 0 7%;
+  white-space: nowrap; /* 텍스트를 한 줄에 나타내기 */
+  overflow: hidden; /* 텍스트가 넘어갈 경우 숨기기 */
+  text-overflow: ellipsis; /* 생략 부호(...) 표시 */
+}
+
+.item-detail {
+  font-family: "Pretendard Variable";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  color: black;
+  margin: 2rem 7% 0 7%;
+  white-space: nowrap; /* 텍스트를 한 줄에 나타내기 */
+  overflow: hidden; /* 텍스트가 넘어갈 경우 숨기기 */
+  text-overflow: ellipsis; /* 생략 부호(...) 표시 */
+}
+
+.item-price {
+  font-family: "Pretendard Variable";
+  font-weight: 400;
+  font-style: normal;
+  font-size: 0.75rem;
+  color: black;
+  margin: 0 7% 0 7%;
+}
+
+/* 로그인 되어있지 않을 때 */
+.not-login-box {
+  width: 99%;
+  height: 7rem;
+  display: flex; /* Flexbox를 사용해 가로 정렬 */
+  align-items: center;
+  box-shadow: 0.25px 0.25rem 0.2rem rgba(0, 0, 0, 0.2); /* 그림자 추가 */
+  border-radius: 0.5rem;
+  text-decoration: none;
+  color: black;
+  font-size: 1.25rem;
+  font-family: "Pretendard Variable";
+  font-weight: bold;
+  font-style: normal;
+}
+
+.profile-icon {
+  margin: 0 5%;
+}