축제 마지막 배포

src/components/views/Modal/Modal.jsx

@@ -1,23 +1,34 @@
-import "./Modal.css";
 import { IMAGES } from "../../../constants/images";
+import "./Modal.css";
 
-const Modal = ({ setIsOpen, handleCancel, title, subtitle }) => {
+const Modal = ({ setIsOpen, handleCancel, title, subtitle, isOk }) => {
   return (
     <div className="modal-wrapper">
       <div className="modal-box">
         <img src={IMAGES.berry} alt="berry" />
         <div className="modal-title">{title}</div>
         <div className="modal-subtitle">{subtitle}</div>
         <div className="modal-btn__wrapper">
-          <span
-            className="modal-cancle-btn"
-            onClick={() => setIsOpen((prev) => !prev)}
-          >
-            취소
-          </span>
-          <span className="modal-check-btn" onClick={handleCancel}>
-            확인
-          </span>
+          {isOk ? (
+            <span 
+              className="modal-check-btn"
+              onClick={() => setIsOpen((prev) => !prev)}
+            >
+              확인
+            </span>
+          ) : (
+            <>
+              <span
+                className="modal-cancle-btn"
+                onClick={() => setIsOpen((prev) => !prev)}
+              >
+                취소
+              </span>
+              <span className="modal-check-btn" onClick={handleCancel}>
+                확인
+              </span>
+            </>
+          )}
         </div>
       </div>
     </div>

src/components/views/Skeleton/Skeleton.css

@@ -0,0 +1,86 @@
+@keyframes loading {
+    0% {
+      transform: translateX(0);
+    }
+    50%,
+    100% {
+      transform: translateX(460px);
+    }
+}
+
+.skeleton-item {
+    width: 100%;
+    height: 100%;
+}
+
+.skeleton-item.sm {
+    width: 10%;
+    height: 100%;
+}
+
+.skeleton-info {
+    width: 90%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.skeleton-info.sm {
+    padding: 0.5rem 1.5rem;
+}
+
+.skeleton-name {
+    width: 50%;
+    height: 20px;
+    background-color: #f2f2f2;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-name::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
+    animation: loading 2s infinite linear;
+}
+
+.skeleton-email {
+    width: 20%;
+    height: 15px;
+    background-color: #f2f2f2;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-email.sm {
+    width: 100%;
+    height: 15px;
+    background-color: #f2f2f2;
+    border-radius: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton-email::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 100%;
+    background: linear-gradient(to right, #f2f2f2, #ddd, #f2f2f2);
+    animation: loading 2s infinite linear;
+}
+
+
+.element {
+    overflow: hidden;
+    position: relative;
+}

src/components/views/Skeleton/Skeleton.jsx

@@ -0,0 +1,18 @@
+import "./Skeleton.css";
+
+export const Skeleton = ({size}) => {
+    return (
+        <div className={`skeleton-item ${size === 'sm' && size}`}>
+            {size === "sm" ? (
+                <div className={`skeleton-info element ${size === 'sm' && size}`}>
+                    <span className={`skeleton-email element ${size === 'sm' && size}`}></span>
+                </div>
+            ) : (
+                <div className="skeleton-info element">
+                    <div className="skeleton-name"></div>
+                    <div className="skeleton-email"></div>
+                </div>
+            )}
+        </div>
+    )
+}

src/pages/OrderProcessPage/OrderProcessPage.jsx

@@ -35,9 +35,21 @@ const OrderProcessPage = () => {
   const [totalAmount, setTotalAmount] = useState(price);
   const [prevRadioPrice, setPrevRadioPrice] = useState(category?.map(() => 0));
   const [optionIdx, setOptionIdx] = useState([]);
-  const [essentialOptionIdx, setEssentialOptionIdx] = useState({});
+  const [essentialOptionIdx, setEssentialOptionIdx] = useState([]);
+
+  // 축제용 모달
+  const [isBoothOpen, setIsBoothOpen] = useState(false);
+  const boothModalTitle = ["포장/매장 옵션을 선택하셔야 합니다."]
 
   const handleCartUpdate = () => {
+    // 주점 포장/매장 옵션 선택 여부 확인
+    const pickupIdx = category.filter((item) => item.name === "포장/매장")[0]?.options[0]?.idx;
+    console.log(pickupIdx, essentialOptionIdx);
+    if (pickupIdx && essentialOptionIdx.includes(pickupIdx)) {
+      setIsBoothOpen(true);
+      return;
+    }
+
     let body = {
       storeId: storeId,
       foodieId: foodieId,
@@ -452,6 +464,22 @@ const OrderProcessPage = () => {
           subtitle={"확인 버튼을 누르시면, 이전에 담은 메뉴가 삭제됩니다."}
         />
       )}
+
+      {/* 축제용 모달 */}
+      {isBoothOpen && (
+        <Modal
+          setIsOpen={setIsBoothOpen}
+          handleCancel={() => setIsBoothOpen(false)}
+          title={boothModalTitle.map((line, index) => (
+            <React.Fragment key={index}>
+              {line}
+              <br />
+            </React.Fragment>
+          ))}
+          // subtitle={"확인 버튼을 누르시면, 이전에 담은 메뉴가 삭제됩니다."}
+          isOk={true}
+        />
+      )}
     </div>
   );
 };

src/pages/StoreDetailPage/StoreDetailPage.css

@@ -225,6 +225,7 @@
   padding-bottom: 1.31rem;
   border-bottom: 1px solid #dadada;
   text-decoration: none;
+  position: relative;
 }
 
 .store-detail-page__menuList__item__name {

src/pages/StoreDetailPage/StoreDetailPage.jsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import Header from "../../components/views/Header/Header";
+import { Skeleton } from "../../components/views/Skeleton/Skeleton";
 import useFetchCartCount from "../../hooks/useFetchCartCount";
 import useFetchCartData from "../../hooks/useFetchCartData";
 import useFetchStoreInfo from "../../hooks/useFetchStoreInfo";
@@ -111,7 +112,9 @@ const StoreDetailPage = () => {
                 </span>
               ))
             ) : (
-              <p>Loading category...</p>
+              <Skeleton 
+                size="sm"
+              />
             )}
           </div>
 
@@ -171,7 +174,14 @@ const StoreDetailPage = () => {
               </div>
             ))
           ) : (
-            <p>Loading menu...</p>
+            <>
+              <div className="store-detail-page__menuList__item">
+                <Skeleton></Skeleton>
+              </div>
+              <div className="store-detail-page__menuList__item">
+                <Skeleton></Skeleton>
+              </div>
+            </>
           )}
         </div>