[8주차 & 9주차] 실습 완료

week6/jiyeKa/mission/package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "json-server": "^1.0.0-beta.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.0",

week6/jiyeKa/mission/src/App.jsx

@@ -1,7 +1,15 @@
 import Router from "./pages/Router";
 import { Normalize } from "styled-normalize";
+import useCartStore from "./store/cartStore";
+import { useEffect } from "react";
+
 
 const App = () => {
+
+  const fetchCart = useCartStore((state) => state.fetchCart);
+  useEffect(() => {
+    fetchCart();
+  }, [])
   return (
     <>
       <Normalize />

week6/jiyeKa/mission/src/apis/cart.js

@@ -0,0 +1,18 @@
+export const getCart = async () => {
+    const response = await fetch("http://localhost:8080/cart");
+    const data = await response.json();
+    return data;
+};
+
+export const updateCart = async (store, menus) => {
+    return await fetch("http://localhost:8080/cart",{
+        method: "POST",
+        headers: {
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            store,
+            menus,
+        })
+    });
+};

week6/jiyeKa/mission/src/apis/stores.js

@@ -0,0 +1,11 @@
+export const getStores = async() => {
+    const response = await fetch("http://localhost:8080/stores");
+    const data = await response.json();
+    return data;
+}
+
+export const getStore = async (storeId) => {
+    const response = await fetch(`http://localhost:8080/stores/${storeId}`);
+    const data = await response.json();
+    return data;
+}

week6/jiyeKa/mission/src/components/MainMenuCategory/MainMenuCategory.jsx

@@ -20,7 +20,7 @@ const MainMenuCategory = () => {
 
   const navigate = useNavigate();
   const onClickhandle = () => {
-    navigate("/store");
+    navigate("/stores");
   }
 
   return (

week6/jiyeKa/mission/src/components/MenuItem/MenuItem.jsx

@@ -5,24 +5,24 @@ import {BestMenu, MenuItemContainer, MenuName, MenuPrice, MenuIngredients, MenuB
 import roundIMG from "../../assets/roundIMG.svg"
 import useCartStore from "../../store/cartStore.js"
 
-const MenuItem = ({ menu }) => {
+const MenuItem = ({ menu, handleAddMenu }) => {
 
   const menus = useCartStore((state) => state.menus);
   const addMenu = useCartStore((state) => state.addMenu);
   const resetCart = useCartStore((state)=>state.resetCart)
   const currentStore = useCartStore((state) => state.store);
 
-  const handleAddMenu = () => {
-    if (menus.length > 0 && (menus[0].storeID !== menu.storeID)) {
-      const alert = window.confirm("주문서에는 같은 가게만 담을 수 있어요. 새로 담고 이전에 담은 메뉴는 삭제할까요?");
-      if (alert) {
-        resetCart();
-        addMenu(menu);
-      }
-    } else {
-      addMenu(menu);
-    }
-  };
+  // const handleAddMenu = () => {
+  //   if (menus.length > 0 && (menus[0].storeID !== menu.storeID)) {
+  //     const alert = window.confirm("주문서에는 같은 가게만 담을 수 있어요. 새로 담고 이전에 담은 메뉴는 삭제할까요?");
+  //     if (alert) {
+  //       resetCart();
+  //       addMenu(menu);
+  //     }
+  //   } else {
+  //     addMenu(menu);
+  //   }
+  // }; -> StoreInfo.jsx에서 구현
 
 
   return (

week6/jiyeKa/mission/src/components/StoreInfo/StoreInfo.jsx

@@ -1,12 +1,26 @@
 import {useParams} from "react-router-dom";
-import stores from "../../models/stores";
 import MenuItem from "../../components/MenuItem/MenuItem";
 import star from "../../assets/star.svg";
 import {NoStoreWrapper, StoreInfoWrapper, InfoWrapper, MenuWrapper} from "./StoreInfo.styles";
+import { useState, useEffect } from "react";
+import { getStore } from "../../apis/stores";
+import useCartStore from "../../store/cartStore";
 
 const StoreInfo = () => {
   const {storeId} = useParams();
-  const store = stores.find((store) => store.id.toString() === storeId);
+  // const store = stores.stores.find((store) => store.id.toString() === storeId);
+  const [store, setStore] = useState();
+  const addMenu = useCartStore((state) => state.addMenu);
+
+  useEffect(() => {
+    getStore(storeId).then(value => setStore(value)); //api 사용해서 id를 통한 store 찾기
+  }, [storeId]) 
+
+  const handleAddMenu = (menu) => {
+    //
+    addMenu(menu, store)
+  }
+
 
   if (!store) {
     return (
@@ -42,7 +56,7 @@ const StoreInfo = () => {
         <div className="storeMenu">
           {store.menus.map((menu) => {
             return (
-              <MenuItem key={menu.id} menu={menu} />
+              <MenuItem key={menu.id} menu={menu} handleAddMenu={() => handleAddMenu(menu)}/>
             );
           })}
         </div>

week6/jiyeKa/mission/src/components/StoreList/StoreList.jsx

@@ -3,8 +3,8 @@ import {StoresTitle, StoresWrapper, ListWrapper} from "./StoreList.styles";
 import StoresDetail from "../StoresDetail/StoresDetail";
 import useCartStore from '../../store/cartStore';
 
-const StoresList = () => {
-  const storeList = useCartStore((state) => state.storeList);
+const StoreList = () => {
+  const storeList = useCartStore((state) => state.storeList) || [];
   const sortedStores = storeList.sort((a, b) => b.reviewCnt - a.reviewCnt); //리뷰 수 기준으로 정렬
 
   const topThreeStores = sortedStores.slice(0, 3); // 1~3위만 따로 스타일링
@@ -77,4 +77,4 @@ const StoresList = () => {
     </StoresWrapper>
   );
 };
-export default StoresList;
+export default StoreList;