Merge pull request #33 from LikeLion-Hackathon-T1/develop

1차 api 3차 배포

src/App.js

@@ -12,17 +12,17 @@ import theme from "styles/SyluvTheme";
 import StorePage from "pages/StorePage";
 import QrPage from "pages/QrPage";
 import QrGenPage from "pages/QrGenPage";
+import MenuItemDetail from "./components/Store/MenuItemDetail";
 import OrderListPage from "pages/OrderListPage";
 import OrderDetailPage from "pages/OrderDetailPage";
 const App = () => {
-    useEffect(() => {
-        if (window.location.host === "syluv.store") {
-            window.location.replace(
-                "https://www.syluv.store" + window.location.pathname
-            );
-        }
-    }, []);
-
+  useEffect(() => {
+    if (window.location.host === "syluv.store") {
+      window.location.replace(
+        "https://www.syluv.store" + window.location.pathname
+      );
+    }
+  }, []);
     return (
         <ThemeProvider theme={theme}>
             <ScrollContainer>
@@ -53,6 +53,7 @@ const App = () => {
                                     path="/order/:orderId"
                                     element={<OrderDetailPage />}
                                 />
+                                <Route path="/menu/:menuItemId" element={<MenuItemDetail />} />
                                 <Route path="/qr" element={<QrPage />} />
                                 <Route path="/qrgen" element={<QrGenPage />} />
                                 <Route
@@ -69,27 +70,27 @@ const App = () => {
 };
 
 const Container = styled.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100vw;
-    background-color: #f0f0f0;
-    flex-direction: column;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100vw;
+  background-color: #f0f0f0;
+  flex-direction: column;
 `;
 
 const MobileContainer = styled.div`
-    width: 480px;
-    min-height: 100vh;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    background-color: #fff;
-    overflow: hidden;
-    overflow-wrap: break-word;
+  width: 480px;
+  min-height: 100vh;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  overflow: hidden;
+  overflow-wrap: break-word;
 
-    @media (max-width: 480px) {
-        width: 100dvw;
-        padding: 0;
-        box-shadow: none;
-    }
+  @media (max-width: 480px) {
+    width: 100dvw;
+    padding: 0;
+    box-shadow: none;
+  }
 `;
 
 export default App;

src/components/Cart/CartItem.js

@@ -1,48 +1,37 @@
 import styled from "styled-components";
 import ItemCounter from "./ItemCounter";
-import { useCallback, useState } from "react";
+import { useCallback, useState, useEffect } from "react";
 import Item from "../Common/Item/Item";
 import { ReactComponent as Cancel } from "assets/images/cancle.svg";
 import CheckButton from "./CheckButton";
-import useSyluvAxios from "hooks/useSyluvAxios";
 
 const CartItem = ({
     name,
     count = 0,
     price,
     cartId,
     ImgSrc = "https://via.placeholder.com/100",
+    handleCartList = () => {},
+    isChecked = false,
+    onCheckChange = () => {},
 }) => {
     const [quantity, setQuantity] = useState(count);
-    const [isChecked, setIsChecked] = useState(false);
-    const syluvAxios = useSyluvAxios();
+    const [checked, setChecked] = useState(isChecked);
+
+    useEffect(() => {
+        setChecked(isChecked);
+    }, [isChecked]);
 
     const handleRemove = useCallback(() => {
-        syluvAxios
-            .delete(`/cart/${cartId}/delete`)
-            .then(() => {
-                alert("삭제되었습니다.");
-                window.location.reload();
-            })
-            .catch((err) => {
-                console.log(err);
-            });
-    }, [syluvAxios, cartId]);
+        handleCartList(cartId, { quantity: 0 });
+    }, [handleCartList, cartId]);
 
     const handleChangeQuantity = useCallback(
         (quantity) => {
-            syluvAxios
-                .patch(`/cart/${cartId}/update`, {
-                    quantity,
-                })
-                .then(() => {
-                    setQuantity(quantity);
-                })
-                .catch((err) => {
-                    console.log(err);
-                });
+            handleCartList(cartId, { quantity });
+            setQuantity(quantity);
         },
-        [syluvAxios, cartId]
+        [handleCartList, cartId]
     );
 
     const handleIncrease = useCallback(() => {
@@ -54,32 +43,21 @@ const CartItem = ({
     }, [handleChangeQuantity, quantity]);
 
     const handleClick = () => {
-        setIsChecked(!isChecked);
+        const newChecked = !checked;
+        setChecked(newChecked);
+        onCheckChange(cartId, newChecked);
     };
 
     return (
         <CartItemContainer>
             <Container>
-                <CheckButton
-                    isChecked={isChecked}
-                    onClick={() => {
-                        handleClick();
-                    }}
-                />
+                <CheckButton isChecked={checked} onClick={handleClick} />
                 <Item name={name} price={price} ImgSrc={ImgSrc} />
-                <EraseButton
-                    onClick={() => {
-                        handleRemove();
-                    }}
-                />
+                <EraseButton onClick={handleRemove} />
                 <ItemCounter
                     quantity={quantity}
-                    onDecrease={() => {
-                        handleDecrease();
-                    }}
-                    onIncrease={() => {
-                        handleIncrease();
-                    }}
+                    onDecrease={handleDecrease}
+                    onIncrease={handleIncrease}
                 />
             </Container>
         </CartItemContainer>

src/components/Cart/Store.js

@@ -2,19 +2,44 @@ import styled from "styled-components";
 import CartItem from "./CartItem";
 import StoreHeader from "./StoreHeader";
 
-const Store = ({ name = "", items = [] }) => {
+const Store = ({
+    name = "",
+    items = [],
+    changeCartList = () => {},
+    toggleStoreCheck = () => {},
+}) => {
+    const allChecked = items.every((item) => item.isChecked);
+
+    const handleStoreCheck = (isChecked) => {
+        toggleStoreCheck(name, isChecked);
+    };
+
+    const handleItemCheckChange = (cartId, isChecked) => {
+        changeCartList(cartId, { isChecked });
+        if (!isChecked) {
+            toggleStoreCheck(name, false);
+        }
+    };
+
     return (
         <Container>
-            <StoreHeader name={name} />
+            <StoreHeader
+                name={name}
+                isChecked={allChecked}
+                onCheck={handleStoreCheck}
+            />
             <CartItemContainer>
                 {items.map((item, index) => (
                     <CartItem
                         key={index}
                         name={item.menuName}
                         price={item.price}
                         count={item.quantity}
+                        isChecked={item.isChecked}
                         storeName={name}
-                        cartId={item.cartId}
+                        cartId={item.cartid}
+                        handleCartList={changeCartList}
+                        onCheckChange={handleItemCheckChange}
                     />
                 ))}
             </CartItemContainer>

src/components/Cart/StoreHeader.js

@@ -1,33 +1,26 @@
 import styled from "styled-components";
 import { useNavigate } from "react-router-dom";
 import CheckButton from "./CheckButton";
-import useCartStore from "hooks/useCartStore";
 import { useEffect, useState } from "react";
 
-const StoreHeader = ({ name, storeSrc = "/" }) => {
+const StoreHeader = ({ name, storeSrc = "/", isChecked, onCheck }) => {
     const navigate = useNavigate();
-    const { clickStore, isStoreClicked, removeClickedStore } = useCartStore();
-    const [isChecked, setIsChecked] = useState(false);
-
-    const storeIsClicked = isStoreClicked(name);
+    const [checked, setChecked] = useState(isChecked);
 
     useEffect(() => {
-        setIsChecked(storeIsClicked);
-    }, [storeIsClicked]);
+        setChecked(isChecked);
+    }, [isChecked]);
 
     const handleClick = () => {
-        if (isChecked) {
-            removeClickedStore(name);
-        } else {
-            clickStore(name);
-        }
-        setIsChecked(!isChecked);
+        const newChecked = !checked;
+        setChecked(newChecked);
+        onCheck(newChecked);
     };
 
     return (
         <Header>
             <Container>
-                <CheckButton isChecked={isChecked} onClick={handleClick} />
+                <CheckButton isChecked={checked} onClick={handleClick} />
                 <StoreName onClick={() => navigate(storeSrc)}>{name}</StoreName>
             </Container>
         </Header>

src/components/Cart/StoreList.js

@@ -1,29 +1,39 @@
-// StoreList.js
 import styled from "styled-components";
 import Store from "./Store";
+import { useCallback, useEffect } from "react";
 import useSyluvAxios from "hooks/useSyluvAxios";
-import { useEffect, useState } from "react";
 
-const StoreList = () => {
+const StoreList = ({ cartList, setCartList, isLoading }) => {
     const syluvAxios = useSyluvAxios();
-    const [cartList, setCartList] = useState([]);
-    const [isLoading, setIsLoading] = useState(true);
+
+    const putCart = useCallback(async () => {
+        const payload = cartList.map((item) => {
+            return {
+                cartId: item.cartid,
+                quantity: item.quantity,
+                isChecked: item.isChecked,
+            };
+        });
+        try {
+            await syluvAxios.put("/cart", payload);
+        } catch (err) {
+            console.log(err);
+        }
+    }, [cartList]);
 
     useEffect(() => {
-        const getCart = async () => {
-            await syluvAxios
-                .get("/cart")
-                .then((res) => {
-                    setCartList(res.data.payload);
-                    console.log(res.data.payload);
-                    setIsLoading(false);
-                })
-                .catch((err) => {
-                    console.log(err);
-                });
+        const handleBeforeUnload = (event) => {
+            putCart();
+            event.preventDefault();
+            event.returnValue = "";
+        };
+
+        window.addEventListener("beforeunload", handleBeforeUnload);
+
+        return () => {
+            window.removeEventListener("beforeunload", handleBeforeUnload);
         };
-        getCart();
-    }, []);
+    }, [putCart]);
 
     if (isLoading) return <div></div>;
 
@@ -38,6 +48,47 @@ const StoreList = () => {
         0
     );
 
+    const changeCartList = (cartId, updatedProperties) => {
+        setCartList((prevCartList) =>
+            prevCartList.map((item) => {
+                if (item.cartid === cartId) {
+                    return { ...item, ...updatedProperties };
+                }
+                return item;
+            })
+        );
+    };
+
+    const toggleStoreCheck = (storeName, isChecked) => {
+        setCartList((prevCartList) => {
+            return prevCartList.map((item) => {
+                // 현재 스토어의 모든 아이템이 체크되어 있는지 확인
+                const allItemsChecked = prevCartList
+                    .filter((i) => i.storeName === storeName)
+                    .every((i) => i.isChecked);
+
+                // 스토어가 체크 해제되는 경우
+                if (!isChecked) {
+                    if (allItemsChecked) {
+                        // 모든 아이템이 체크되어 있다면 아이템도 함께 체크 해제
+                        if (item.storeName === storeName) {
+                            return { ...item, isChecked };
+                        }
+                    } else {
+                        // 그렇지 않다면 아이템 상태 유지
+                        return item;
+                    }
+                } else {
+                    // 스토어가 체크되는 경우 아이템 상태 변경
+                    if (item.storeName === storeName) {
+                        return { ...item, isChecked };
+                    }
+                }
+                return item;
+            });
+        });
+    };
+
     return (
         <CartList>
             {Object.keys(stores).length > 0 ? (
@@ -46,6 +97,8 @@ const StoreList = () => {
                         key={storeName}
                         name={storeName}
                         items={stores[storeName]}
+                        changeCartList={changeCartList}
+                        toggleStoreCheck={toggleStoreCheck}
                     />
                 ))
             ) : (