Merge pull request #138 from imi21123/test

Feat: 장바구니, 메뉴 이미지, 이벤트 문구
readyvery · Dec 3, 2023 · b92f7bd · b92f7bd
2 parents dc5a79b + 56b2520
commit b92f7bd
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 44 deletions.
diff --git a/src/assets/images/no_image_menu.svg b/src/assets/images/no_image_menu.svg
diff --git a/src/pages/CartPage/CartPage.css b/src/pages/CartPage/CartPage.css
@@ -3,6 +3,7 @@
   width: 100%;
   height: 94vh;
   flex-direction: column;
+  padding-bottom: 2rem;
 }
 
 .cart-page__cafe-info {
@@ -11,6 +12,7 @@
   padding-right: 1.56rem;
   padding-top: 1.38rem;
   padding-bottom: 0.44rem;
+  text-decoration: none;
 }
 
 .cart-page__cafe-info__img {
@@ -150,6 +152,7 @@
   border-radius: 0.625rem;
   background: #d82356;
   text-decoration: none;
+  margin-top: 1.5rem;
   margin-left: auto;
   margin-right: auto;
   justify-content: center;
@@ -204,6 +207,27 @@
   margin-right: 1.06rem;
 }
 
+.cart-page__store-close {
+  display: flex;
+  width: 23.4375rem;
+  height: 3.6875rem;
+  flex-shrink: 0;
+  border-radius: 0.625rem;
+  background: #838383;
+  color: #fff;
+  text-align: center;
+  font-family: "Bold";
+  font-size: 1.125rem;
+  line-height: 130%; /* 1.4625rem */
+  letter-spacing: -0.01125rem;
+  margin-top: 1.5rem;
+  margin-left: auto;
+  margin-right: auto;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
 .cart-page__cart-empty {
   display: flex;
   align-items: center;

diff --git a/src/pages/CartPage/CartPage.jsx b/src/pages/CartPage/CartPage.jsx
@@ -140,7 +140,10 @@ const CartPage = () => {
 
       {paymentData && paymentData?.carts.length > 0 ? (
         <div className="cart-page__cart-content">
-          <div className="cart-page__cafe-info">
+          <Link
+            to={`/store?storeId=${paymentData?.storeId}&inout=${paymentData?.inOut}`}
+            className="cart-page__cafe-info"
+          >
             <img
               className="cart-page__cafe-info__img"
               src={paymentData?.imgUrl}
@@ -150,7 +153,7 @@ const CartPage = () => {
             <text className="cart-page__cafe-info__name">
               {paymentData?.name}
             </text>
-          </div>
+          </Link>
 
           <div className="cart-page__order-info">
             {paymentData?.carts.map((item) => (
@@ -223,24 +226,28 @@ const CartPage = () => {
 
             <Link
               className="cart-page__order-info__item__add"
-              to={`/store?storeId=${storeId}&inout=${inout}`}
+              to={`/store?storeId=${paymentData?.storeId}&inout=${paymentData?.inOut}`}
               style={{ textDecoration: "none" }}
             >
               + 더 담으러 가기
             </Link>
           </div>
 
-          <Link
-            to={`/payment?storeId=${storeId}&inout=${inout}&cartId=${cartId}`}
-            className="cart-page__order-btn"
-          >
-            <span className="cart-page__total-quantity">{totalQuantity}</span>
-            <span className="cart-page__order-text">주문하기</span>
-            <span className="cart-page__total-price">
-              {totalPrice?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +
-                "원"}
-            </span>
-          </Link>
+          {paymentData?.isOpened ? (
+            <Link
+              to={`/payment?storeId=${paymentData?.storeId}&inout=${paymentData?.inOut}&cartId=${paymentData?.cartId}`}
+              className="cart-page__order-btn"
+            >
+              <span className="cart-page__total-quantity">{totalQuantity}</span>
+              <span className="cart-page__order-text">주문하기</span>
+              <span className="cart-page__total-price">
+                {totalPrice?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +
+                  "원"}
+              </span>
+            </Link>
+          ) : (
+            <div className="cart-page__store-close">지금은 준비중입니다.</div>
+          )}
         </div>
       ) : (
         <div className="cart-page__cart-empty">

diff --git a/src/pages/OrderProcessPage/OrderProcess.css b/src/pages/OrderProcessPage/OrderProcess.css
@@ -3,7 +3,7 @@
   width: 100%;
   height: 94vh;
   flex-direction: column;
-  /* height: 100%; */
+  padding-bottom: 2rem;
 }
 
 .order-process-page__menu__img {
@@ -16,7 +16,6 @@
   align-items: center;
   flex-shrink: 0;
   border-radius: 0.5rem;
-  background: #fff;
   box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.15);
   margin-left: auto;
   margin-right: auto;
@@ -327,7 +326,7 @@
   margin-right: auto;
 }
 
-.order-process-page__is-close {
+.order-process-page__store-close {
   display: flex;
   width: 23.4375rem;
   height: 3.6875rem;

diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx
@@ -246,12 +246,11 @@ const OrderProcessPage = () => {
         }}
       />
 
-      <div className="order-process-page__menu__img">
-        <img
-          src={foodOptionInfo?.imgUrl ? foodOptionInfo.imgUrl : noImageMenu}
-          alt="menuImg"
-        />
-      </div>
+      <img
+        className="order-process-page__menu__img"
+        src={foodOptionInfo?.imgUrl ? foodOptionInfo.imgUrl : noImageMenu}
+        alt="menuImg"
+      />
 
       <div className="order-process-page__menu__name">
         {foodOptionInfo?.name}
@@ -462,8 +461,8 @@ const OrderProcessPage = () => {
           장바구니 담기
         </div>
       ) : (
-        <div className="order-process-page__is-close">
-          지금은 영업 전입니다.
+        <div className="order-process-page__store-close">
+          지금은 준비중입니다.
         </div>
       )}
 

diff --git a/src/pages/PackagingStatusPage/PackagingStatusPage.css b/src/pages/PackagingStatusPage/PackagingStatusPage.css
@@ -31,7 +31,7 @@
   margin-bottom: 2rem;
 }
 
-.packaging-status-page__promotion {
+.packaging-status-page__event-img {
   display: flex;
   margin-left: auto;
   margin-right: auto;
@@ -73,3 +73,14 @@
   margin-top: auto;
   margin-bottom: auto;
 }
+
+.packaging-status-page__event {
+  color: var(--kakao-logo, #d82356);
+  font-family: "Semibold";
+  font-size: 0.9375rem;
+  line-height: 130%;
+  letter-spacing: -0.00938rem;
+  margin-top: auto;
+  margin-bottom: auto;
+  margin-left: 0.2rem;
+}
diff --git a/src/pages/PackagingStatusPage/PackagingStatusPage.jsx b/src/pages/PackagingStatusPage/PackagingStatusPage.jsx
@@ -12,7 +12,7 @@ const PackagingStatusPage = () => {
   const storeId = params.get("storeId");
   const apiRoot = process.env.REACT_APP_API_ROOT;
 
-  const [promotion, setPromotion] = useState(null);
+  const [event, setEvent] = useState(null);
   useEffect(() => {
     // API 엔드포인트
     const apiUrl = `${apiRoot}/api/v1/store/${storeId}/event`;
@@ -23,7 +23,7 @@ const PackagingStatusPage = () => {
       .then((response) => {
         // API 응답을 상태에 저장
         console.log(response.data);
-        setPromotion(response.data.eventImgUrl);
+        setEvent(response.data);
       })
       .catch((error) => {
         console.error("Error fetching store data:", error);
@@ -40,8 +40,8 @@ const PackagingStatusPage = () => {
       </div>
 
       <img
-        className="packaging-status-page__promotion"
-        src={promotion}
+        className="packaging-status-page__event-img"
+        src={event?.eventImgUrl}
         alt="promotion"
       />
 
@@ -55,7 +55,7 @@ const PackagingStatusPage = () => {
             src={takeIn}
             alt="takeOut"
           />
-          <span className="packaging-status-page__text">먹고갈게요</span>
+          <span className="packaging-status-page__text">먹고갈게요 </span>
         </div>
       </Link>
 
@@ -70,6 +70,9 @@ const PackagingStatusPage = () => {
             alt="takeOut"
           />
           <span className="packaging-status-page__text">가져갈게요</span>
+          <span className="packaging-status-page__event">
+            {event?.takeOutEvent}
+          </span>
         </div>
       </Link>
     </div>

diff --git a/src/pages/StoreDetailPage/StoreDetailPage.css b/src/pages/StoreDetailPage/StoreDetailPage.css
@@ -2,11 +2,11 @@
   display: flex;
   width: 100%;
   flex-direction: column;
+  padding-bottom: 5rem;
 }
 
 .store-detail-page__scroll {
   overflow-y: auto;
-  overflow-x: hidden;
 }
 
 .store-detail-page__banner {

diff --git a/src/pages/StoreDetailPage/StoreDetailPage.jsx b/src/pages/StoreDetailPage/StoreDetailPage.jsx
@@ -144,7 +144,12 @@ const StoreDetailPage = () => {
               {"영업 시간"}
             </text>
             <text className="store-detail-page__caffeeInfo__time">
-              {caffeeInfo?.openTime}
+              {caffeeInfo?.openTime.split("\n").map((line, index) => (
+                <React.Fragment key={index}>
+                  {line}
+                  <br />
+                </React.Fragment>
+              ))}
             </text>
           </div>
         </div>