95 lines
4.7 KiB
TypeScript
95 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import { MenuItem } from "@/lib/readCsv";
|
|
import { useOrder } from "../hooks/useOrder";
|
|
import Menu from "./menu";
|
|
import { Button } from "./ui/button";
|
|
import { Drawer, DrawerClose, DrawerContent, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
|
|
import { useRouter } from "next/navigation";
|
|
import { saveOrderApi } from "@/app/order/action";
|
|
|
|
export default function Order({
|
|
menus,
|
|
categories,
|
|
}: {
|
|
|
|
menus: MenuItem[];
|
|
categories: string[];
|
|
}) {
|
|
const { state, dispatch } = useOrder();
|
|
const router = useRouter();
|
|
|
|
return (
|
|
<>
|
|
<Menu menus={menus} categories={categories} dispatch={dispatch} />
|
|
<Drawer>
|
|
<DrawerTrigger asChild>
|
|
<Button className="w-full mt-2 flex items-center">Order <span className="
|
|
ml-1 flex items-center justify-center rounded-full h-6 px-1 text-center bg-background text-foreground">{state.orders.reduce(
|
|
(acc, order) => acc + order.quantity, 0)}</span></Button>
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader>
|
|
<DrawerTitle>다음 주문이 맞나요?</DrawerTitle>
|
|
</DrawerHeader>
|
|
<hr className="mx-4"/>
|
|
<ul className="flex flex-col gap-2 justify-center m-4">
|
|
{state.orders.map(order => (
|
|
<li key={`${order.HOT ? "HOT" : "COLD"} ${order.name}`} className="flex items-center">
|
|
<span className="w-12">{order.HOT ? "HOT " : "COLD"}</span>
|
|
<span className="flex-1">{order.name}</span>
|
|
<span className="flex-1">단위 가격{order.price * 1000}원</span>
|
|
<span className="flex-1">{order.quantity}개</span>
|
|
<span className="flex-1">총 가격 {order.price * order.quantity * 1000}원</span>
|
|
<div className="flex space-x-2">
|
|
<Button variant="outline"
|
|
className="rounded-full"
|
|
onClick={() => dispatch({ type: "ADD_ORDER",
|
|
order:{
|
|
...order,
|
|
quantity: 1
|
|
}})} >+1</Button>
|
|
<Button variant="outline"
|
|
className="rounded-full"
|
|
onClick={() => dispatch({ type: "ADD_ORDER",
|
|
order: {
|
|
...order,
|
|
quantity: -1
|
|
}})}>-1</Button>
|
|
<Button variant="outline" onClick={() => dispatch({ type: "REMOVE_ORDER", order })}>취소</Button>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<hr className="mx-4" />
|
|
<div className="flex mx-4 flex-col items-end">
|
|
<span className="text-sm text-muted-foreground">총 가격</span>
|
|
<span className="flex-1 text-lg">{state.orders.map(order => order.price * order.quantity)
|
|
.reduce((acc, price) => acc + price, 0) * 1000}원
|
|
</span>
|
|
</div>
|
|
<DrawerFooter>
|
|
<DrawerClose asChild>
|
|
<Button onClick={async ()=>{
|
|
console.log("order complete", router);
|
|
const d = await saveOrderApi(state.orders, "account")
|
|
console.log(d);
|
|
console.log("a complete", router);
|
|
router.push("/");
|
|
|
|
}}>계좌이체 주문하기</Button>
|
|
</DrawerClose>
|
|
<DrawerClose asChild>
|
|
<Button onClick={()=>{
|
|
saveOrderApi(state.orders, "cash").then(()=>{
|
|
console.log("order complete", router);
|
|
router.push("/");
|
|
})
|
|
}}>현금 주문하기</Button>
|
|
</DrawerClose>
|
|
</DrawerFooter>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</>
|
|
);
|
|
} |