Merge pull request #318 from hhbb0081/test

Feat: 주점 포장/매장 선택 여부에 따른 모달 추가
readyvery · May 19, 2024 · 5d1a820 · 5d1a820
2 parents 6e0cd5b + dc333fc
commit 5d1a820
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 12 deletions.
diff --git a/src/components/views/Modal/Modal.jsx b/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>

diff --git a/src/pages/OrderProcessPage/OrderProcessPage.jsx b/src/pages/OrderProcessPage/OrderProcessPage.jsx
@@ -35,9 +35,20 @@ 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;
+    if (pickupIdx && essentialOptionIdx.includes(pickupIdx)) {
+      setIsBoothOpen(true);
+      return;
+    }
+
     let body = {
       storeId: storeId,
       foodieId: foodieId,
@@ -452,6 +463,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>
   );
 };