Merge pull request #112 from TEAM-SYLUV/develop

Develop
TEAM-SYLUV · Aug 6, 2024 · e2c2a28 · e2c2a28
2 parents 8e0713c + dc323b4
commit e2c2a28
Show file tree

Hide file tree

Showing 13 changed files with 686 additions and 307 deletions.
diff --git a/src/App.js b/src/App.js
@@ -24,6 +24,8 @@ import PayCallback from "utils/PayCallback";
 import OrderRequest from "utils/OrderRequest";
 import OrderResult from "pages/OrderResult";
 import QRredirection from "utils/QRredirection";
+import ErrorPage from "pages/ErrorPage";
+import FeedBack from "pages/FeedBack";
 
 const App = () => {
     useEffect(() => {
@@ -104,6 +106,11 @@ const App = () => {
                                     path="/qr/redirection/:marketId/:storeId"
                                     element={<QRredirection />}
                                 />
+                                <Route path="/error" element={<ErrorPage />} />
+                                <Route
+                                    path="/feedback"
+                                    element={<FeedBack />}
+                                />
                             </Routes>
                         </BrowserRouter>
                     </MobileContainer>

diff --git a/src/components/Common/ButtonModal.js b/src/components/Common/ButtonModal.js
@@ -15,12 +15,16 @@ const ButtonModal = ({
                 <div className="title-text">{title}</div>
                 <div className="sub-text">{subText}</div>
                 <div className="buttons">
-                    <ModalButton onClick={() => onLeftClick()}>
-                        {left}
-                    </ModalButton>
-                    <ModalButton onClick={() => onRightClick()}>
-                        {right}
-                    </ModalButton>
+                    {left && (
+                        <ModalButton onClick={() => onLeftClick()}>
+                            {left}
+                        </ModalButton>
+                    )}
+                    {right && (
+                        <ModalButton onClick={() => onRightClick()}>
+                            {right}
+                        </ModalButton>
+                    )}
                 </div>
             </ModalContainer>
         </>
@@ -34,19 +38,20 @@ const Overlay = styled.div`
     top: 0;
     bottom: 0;
     background-color: rgba(0, 0, 0, 0.5); // Semi-transparent black
-    z-index: 5; // Ensure it's below the modal but above other content
+    z-index: 120; // Ensure it's below the modal but above other content
     width: 480px;
     @media (max-width: 480px) {
         width: 100dvw;
     }
 `;
 
 const ModalContainer = styled.div`
+    min-width: 380px;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    z-index: 10;
+    z-index: 121;
     background-color: white;
     border-radius: 5px;
     display: flex;
@@ -70,13 +75,19 @@ const ModalContainer = styled.div`
         font-weight: ${({ theme }) => theme.fontWeight.bold};
         color: ${({ theme }) => theme.color.gray900};
         margin-bottom: 20px;
+        text-align: center;
     }
 
     .sub-text {
         font-size: 20px;
         color: ${({ theme }) => theme.color.primary};
         font-weight: ${({ theme }) => theme.fontWeight.bold};
         margin-bottom: 20px;
+        text-align: center;
+    }
+
+    @media (max-width: 480px) {
+        min-width: 80dvw;
     }
 `;
 

diff --git a/src/owner/components/OwnerHeader.js b/src/owner/components/OwnerHeader.js
@@ -1,33 +1,53 @@
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
-import useSyluvAxios from "hooks/useSyluvAxios";
-import { useEffect, useState } from "react";
+import { ReactComponent as Syluv } from "assets/images/syluv-small.svg";
+import { useState } from "react";
+import ButtonModal from "components/Common/ButtonModal";
 
 const OwnerHeader = ({ name, stores }) => {
     const navigate = useNavigate();
     const storeData = stores || [];
+    const [openModal, setOpenModal] = useState(false);
 
     const handleSelectStore = (storeId) => {
         navigate(`/owner/${storeId}`);
     };
 
     return (
-        <Header>
-            <div className="title">{name}</div>
-            <select
-                onChange={(e) => handleSelectStore(e.target.value)}
-                defaultValue=""
-            >
-                <option value="" disabled>
-                    가게 이동
-                </option>
-                {storeData.map((store) => (
-                    <option key={store.storeId} value={store.storeId}>
-                        {store.name}
+        <>
+            <Header>
+                <div className="title">
+                    <Syluv
+                        cursor={"pointer"}
+                        onClick={() => setOpenModal(true)}
+                    />
+                    {name}
+                </div>
+                <select
+                    onChange={(e) => handleSelectStore(e.target.value)}
+                    defaultValue=""
+                >
+                    <option value="" disabled>
+                        가게 이동
                     </option>
-                ))}
-            </select>
-        </Header>
+                    {storeData.map((store) => (
+                        <option key={store.storeId} value={store.storeId}>
+                            {store.name}
+                        </option>
+                    ))}
+                </select>
+            </Header>
+            {openModal && (
+                <ButtonModal
+                    title="일반 사용자 뷰 방문하기"
+                    subText="홈으로 이동하시겠습니까?"
+                    left="이동"
+                    right="취소"
+                    onLeftClick={() => navigate("/")}
+                    onRightClick={() => setOpenModal(false)}
+                />
+            )}
+        </>
     );
 };
 
@@ -45,6 +65,9 @@ const Header = styled.div`
         margin-left: 22px;
         font-size: 20px;
         font-weight: ${({ theme }) => theme.fontWeight.bold};
+        display: flex;
+        align-items: center;
+        gap: 12px;
     }
 
     select {

diff --git a/src/owner/pages/OwnerPage.js b/src/owner/pages/OwnerPage.js
@@ -77,6 +77,7 @@ const Header = styled.div`
     @media (max-width: 480px) {
         width: 100%;
     }
+    z-index: 10;
 `;
 
 const Wrapper = styled.div`

diff --git a/src/pages/CartPage.js b/src/pages/CartPage.js
@@ -3,13 +3,15 @@ import StoreList from "components/Cart/StoreList";
 import useSyluvAxios from "hooks/useSyluvAxios";
 import { useEffect, useState, useCallback } from "react";
 import Toast from "components/Common/Toast";
+import { useNavigate } from "react-router-dom";
 
 const CartPage = () => {
     const syluvAxios = useSyluvAxios();
     const [cartList, setCartList] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [rightDisabled, setRightDisabled] = useState(true);
     const [toastMessage, setToastMessage] = useState("");
+    const navigate = useNavigate();
 
     useEffect(() => {
         const getCartList = async () => {
@@ -21,10 +23,12 @@ const CartPage = () => {
                 }));
                 setCartList(updatedCartList);
                 setIsLoading(false);
-            } catch (err) {}
+            } catch (err) {
+                navigate("/error", { replace: true });
+            }
         };
         getCartList();
-    }, []);
+    }, [navigate]);
 
     useEffect(() => {
         const isAnyItemChecked = cartList.some((item) => item.isChecked);
@@ -44,9 +48,11 @@ const CartPage = () => {
                     );
                     setToastMessage("장바구니에서 메뉴가 삭제되었습니다.");
                 })
-                .catch((err) => {});
+                .catch((err) => {
+                    navigate("/error", { replace: true });
+                });
         });
-    }, [cartList, syluvAxios]);
+    }, [cartList, syluvAxios, navigate]);
 
     const closeToast = useCallback(() => {
         setToastMessage("");

diff --git a/src/pages/ErrorPage.js b/src/pages/ErrorPage.js
@@ -0,0 +1,34 @@
+import ButtonModal from "components/Common/ButtonModal";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+const ErrorPage = () => {
+    const navigate = useNavigate();
+    return (
+        <Wrapper>
+            <ButtonModal
+                title="문제가 발생했습니다"
+                subText="서비스 개선을 위해 노력하겠습니다"
+                left="홈으로"
+                right="피드백하기"
+                onLeftClick={() => navigate("/", { replace: true })}
+                onRightClick={() => navigate("/feedback", { replace: true })}
+            />
+        </Wrapper>
+    );
+};
+
+export default ErrorPage;
+
+const Wrapper = styled.div`
+    height: 100dvh;
+    width: 480px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    @media (max-width: 480px) {
+        width: 100dvw;
+    }
+`;