+ 
+ {foodName}
+
+ );
+};
+
+export default FoodSpace;
\ No newline at end of file
diff --git a/week8/chaebin/src/Components/FoodStore.tsx b/week8/chaebin/src/Components/FoodStore.tsx
new file mode 100644
index 0000000..b45a69c
--- /dev/null
+++ b/week8/chaebin/src/Components/FoodStore.tsx
@@ -0,0 +1,30 @@
+import emptySquare from '../assets/empty_square.svg';
+
+interface FoodStoreProps {
+ index: number;
+ name: string;
+ rate: number;
+ reviewCnt: number;
+ minDeliveryTime: number;
+ maxDeliveryTime: number;
+ deliveryFee: number;
+}
+
+const FoodStore = ({
+ index, name, rate, reviewCnt, minDeliveryTime, maxDeliveryTime, deliveryFee
+}: FoodStoreProps)=> {
+ return(
+
+ 
+
+
+ );
+}
+
+export default FoodStore;
\ No newline at end of file
diff --git a/week8/chaebin/src/Components/MenuItem/MenuItem.tsx b/week8/chaebin/src/Components/MenuItem/MenuItem.tsx
new file mode 100644
index 0000000..6e177c5
--- /dev/null
+++ b/week8/chaebin/src/Components/MenuItem/MenuItem.tsx
@@ -0,0 +1,70 @@
+import Button from "../Button";
+import emptyRound from "../../assets/empty_round.svg";
+import useCartStore from "../../Pages/Store/useCartStore";
+
+interface Menu {
+ name: string;
+ isBest: boolean;
+ price: number | string;
+ ingredients: string;
+}
+
+interface MenuItemProps {
+ menu: Menu;
+ store: StoreInfo;
+}
+
+interface StoreInfo{
+ id: number;
+ name: string;
+ deliveryFee: number;
+ minDeliveryPrice: number;
+}
+
+const MenuItem = ({ menu, store }: MenuItemProps) => {
+ const cartStoreInfo = useCartStore((state) => state.storeInfo);
+ const addMenu = useCartStore((state) => state.addMenu);
+ const handleAddMenu = () => {
+ if (cartStoreInfo !== null && cartStoreInfo.id !== store.id) {
+ const isConfirmed = window.confirm("장바구니에는 같은 가게의 메뉴만 담을 수 있습니다.\n장바구니를 비우고 새로 담으시겠습니까?");
+ if (isConfirmed) {
+ useCartStore.getState().clearCart();
+ addMenu({name: menu.name, price: menu.price, ingredients: menu.ingredients}, store);
+ }
+ }
+ else {
+ addMenu({name: menu.name, price: menu.price, ingredients: menu.ingredients}, store);
+ }
+ };
+
+ return (
+
+
+ {index}위
+ {name}
+ ★{rate} ({reviewCnt})
+ {minDeliveryTime}-{maxDeliveryTime}분 / 배달비 {deliveryFee}원
+
+
+ );
+};
+
+export default MenuItem;
diff --git a/week8/chaebin/src/Components/MoreButton.tsx b/week8/chaebin/src/Components/MoreButton.tsx
new file mode 100644
index 0000000..c0018ca
--- /dev/null
+++ b/week8/chaebin/src/Components/MoreButton.tsx
@@ -0,0 +1,7 @@
+const MoreButton = () => {
+ return(
+
+
+
+ 
+
+
+
+
+
+
+
+ {Number(menu.price).toLocaleString()}원
+
+ {menu.name}
+ {menu.isBest &&Best
}
+ + {menu.ingredients} +
+
+
+
+
+ 더 담기 +
+ );
+}
+
+export default MoreButton;
\ No newline at end of file
diff --git a/week8/chaebin/src/Components/OrderBar/OrderBar.tsx b/week8/chaebin/src/Components/OrderBar/OrderBar.tsx
new file mode 100644
index 0000000..58f51de
--- /dev/null
+++ b/week8/chaebin/src/Components/OrderBar/OrderBar.tsx
@@ -0,0 +1,32 @@
+import {useNavigate} from "react-router-dom";
+import Button from "../Button";
+import useCartStore from "../../Pages/Store/useCartStore";
+
+interface Menu {
+ price: number;
+}
+
+const OrderBar = () => {
+ const navigate = useNavigate();
+ const handleOrder = () => {
+ navigate("/cart");
+ };
+
+ const menus = useCartStore((state) => state.menus);
+
+ const totalPrice = menus.reduce((acc, cur) => acc + Number(cur.price), 0);
+
+ return (
+
+
+ );
+};
+
+export default OrderBar;
diff --git a/week8/chaebin/src/Pages/Cart/Cart.tsx b/week8/chaebin/src/Pages/Cart/Cart.tsx
new file mode 100644
index 0000000..ba728e5
--- /dev/null
+++ b/week8/chaebin/src/Pages/Cart/Cart.tsx
@@ -0,0 +1,115 @@
+import { useNavigate } from "react-router-dom";
+import emptySquare from "../../assets/empty_square.svg";
+import right_arrow from "../../assets/right_arrow.svg";
+import left_arrow from "../../assets/left_arrow.svg";
+import warning from "../../assets/warning.svg";
+import MoreButton from "../../Components/MoreButton";
+import useCartStore from "../Store/useCartStore";
+
+const Cart = () => {
+ const navigate = useNavigate();
+ const menus = useCartStore((state) => state.menus);
+ const storeInfo = useCartStore((state) => state.storeInfo);
+ const clearCart = useCartStore((state) => state.clearCart);
+
+ if (!storeInfo) {
+ return (
+
+
+
+ 총 주문금액
+ {totalPrice}원
+
+
+ );
+ }
+
+ const order = menus.reduce((acc, cur) => acc + Number(cur.price), 0);
+ const deliveryFee = 2000;
+ const totalPrice = order + deliveryFee;
+ const isMinPrice = order < storeInfo.minDeliveryPrice;
+
+ const handleCancelOrder = () => {
+ clearCart();
+ navigate("/store");
+ };
+
+ return (
+ 장바구니가 비어있습니다.
+
+
+ );
+};
+
+export default Cart;
\ No newline at end of file
diff --git a/week8/chaebin/src/Pages/Home/Home.tsx b/week8/chaebin/src/Pages/Home/Home.tsx
new file mode 100644
index 0000000..158e4cf
--- /dev/null
+++ b/week8/chaebin/src/Pages/Home/Home.tsx
@@ -0,0 +1,57 @@
+import FoodSpace from "../../Components/FoodSpace";
+import pizza from "../../assets/pizza.svg";
+import salad from "../../assets/salad.svg";
+import hanburger from "../../assets/hamburger.svg";
+import korean from "../../assets/korean.svg";
+import snack from "../../assets/snack.svg";
+import chicken from "../../assets/chicken.svg";
+import sushi from "../../assets/sushi.svg";
+import sandswich from "../../assets/sandwich.svg";
+import pasta from "../../assets/pasta.svg";
+import dessert from "../../assets/dessert.svg";
+import coffee from "../../assets/coffee.svg";
+import more from "../../assets/more.svg";
+import OrderBar from "../../Components/OrderBar/OrderBar";
+import { Link } from "react-router";
+
+const FoodCategory = [
+ {id: 1, name: "피자", icon: pizza},
+ {id: 2, name: "샐러드", icon: salad},
+ {id: 3, name: "햄버거", icon: hanburger},
+ {id: 4, name: "한식", icon: korean},
+ {id: 5, name: "분식", icon: snack},
+ {id: 6, name: "치킨", icon: chicken},
+ {id: 7, name: "초밥", icon: sushi},
+ {id: 8, name: "샌드위치", icon: sandswich},
+ {id: 9, name: "파스타", icon: pasta},
+ {id: 10, name: "디저트", icon: dessert},
+ {id: 11, name: "커피", icon: coffee},
+ {id: 12, name: "더보기", icon: more}
+
+]
+
+const Home = () => {
+ return(
+
+ ![]()
navigate(-1)} src={right_arrow} alt="뒤로가기" />
+
+
+
+
+ 주문취소
+
+
+
+
+
+
+ {menus.map((menu, index) => (
+ {storeInfo.name}
+
+ {isMinPrice && (
+
+ 최소금액 미달
+ 
+
+ )}
+
+
+
+
+ ))}
+
+
+
+ {menu.name}
+
+ {menu.ingredients}
+
+
+ {Number(menu.price).toLocaleString()}원
+
+
+ 
+
+ 1개
+
+
+
+
+
+
+
+
+
+
+ 주문금액
+ {order.toLocaleString()}원
+
+
+ 배달요금
+ {deliveryFee.toLocaleString()}원
+
+
+ 총 결제금액
+ {totalPrice.toLocaleString()}원
+
+
+
+
+ 최소 주문금액 {storeInfo.minDeliveryPrice.toLocaleString()}원
+
+
+
+
+ );
+};
+
+export default Home;
diff --git a/week8/chaebin/src/Pages/Store/Store.tsx b/week8/chaebin/src/Pages/Store/Store.tsx
new file mode 100644
index 0000000..e52d73c
--- /dev/null
+++ b/week8/chaebin/src/Pages/Store/Store.tsx
@@ -0,0 +1,59 @@
+import MenuItem from '../../Components/MenuItem/MenuItem';
+import OrderBar from '../../Components/OrderBar/OrderBar';
+import stores from '../../models/stores';
+import right_arrow from "../../assets/right_arrow.svg";
+import {useNavigate, useParams} from "react-router-dom";
+
+const Store = () => {
+ const navigate = useNavigate();
+ const { storeId } = useParams();
+ const store = stores.find(store => store.id === Number(storeId));
+ return (
+
+
+
+ 오늘은 무엇을 먹을까요?
+ 한남중앙로 40길 (한남 빌리지)(으)로 배달 {'>'}
+
+
+
+ {FoodCategory.map((food) => (
+
+
+
+ ))}
+
+
+
+
+
+ )
+};
+
+export default Store;
diff --git a/week8/chaebin/src/Pages/Store/useCartStore.tsx b/week8/chaebin/src/Pages/Store/useCartStore.tsx
new file mode 100644
index 0000000..605bc14
--- /dev/null
+++ b/week8/chaebin/src/Pages/Store/useCartStore.tsx
@@ -0,0 +1,41 @@
+import {create} from 'zustand';
+
+interface Menu{
+ name: string;
+ price: number | string;
+ ingredients: string;
+}
+
+interface StoreInfo{
+ id: number;
+ name: string;
+ deliveryFee: number;
+ minDeliveryPrice: number;
+}
+
+interface CartState{
+ storeInfo: StoreInfo | null;
+ menus: Menu[];
+ addMenu: (menu: Menu, store: StoreInfo) => void;
+ clearCart: () => void;
+}
+
+const initialState: Pick
+
+
+ ![]()
navigate(-1)} src={right_arrow} alt="뒤로가기">
+
+
+
+
+
+ {store?.name}
+
+ ★ {store?.rate} 리뷰 {store?.reviewCnt.toLocaleString()}
+
+
+
+
+
+
+ 결제방법
+ 토스 결제만 현장결제 안됨
+
+
+ 최소주문
+ {store?.minDeliveryPrice.toLocaleString()}원
+
+
+ 배달시간
+ {store?.minDeliveryTime}-{store?.maxDeliveryTime}분
+
+
+ 샐러드
+
+ {store?.menus.map((menu) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default Stores;
diff --git a/week8/chaebin/src/Router.tsx b/week8/chaebin/src/Router.tsx
new file mode 100644
index 0000000..aee944f
--- /dev/null
+++ b/week8/chaebin/src/Router.tsx
@@ -0,0 +1,31 @@
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
+import Home from "./Pages/Home/Home";
+import Stores from "./Pages/Stores/Stores";
+import Store from "./Pages/Store/Store";
+import Cart from "./Pages/Cart/Cart";
+
+const Router = () => {
+ const router = createBrowserRouter([
+ {
+ path: "/",
+ element:
+
+
+
+ ![]()
navigate(-1)}
+ src={right_arrow}
+ alt="뒤로가기"
+ />
+
+
+
+
+
+ 샐러드
+
+ {stores.map((store, index) => (
+
+
+
+