init

2024-04-20 19:58:18 +09:00 · 2024-04-20 19:58:18 +09:00 · 550865f643
commit 550865f643
parent 50a62794ed
31 changed files with 3335 additions and 272 deletions
--- a/.gitignore
+++ b/.gitignore
@ -34,3 +34,5 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+order.sqlite3
--- a/README.md
+++ b/README.md
@ -1,5 +1,3 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
 ## Getting Started

 First, run the development server:
@ -28,9 +26,3 @@ To learn more about Next.js, take a look at the following resources:
 - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

 You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
--- a/app/globals.css
+++ b/app/globals.css
@ -2,32 +2,75 @@
  @tailwind components;
  @tailwind utilities;

+  @layer base {
    :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+      --background: 0 0% 100%;
+      --foreground: 240 10% 3.9%;
+
+      --card: 0 0% 100%;
+      --card-foreground: 240 10% 3.9%;
+
+      --popover: 0 0% 100%;
+      --popover-foreground: 240 10% 3.9%;
+
+      --primary: 240 5.9% 10%;
+      --primary-foreground: 0 0% 98%;
+
+      --secondary: 240 4.8% 95.9%;
+      --secondary-foreground: 240 5.9% 10%;
+
+      --muted: 240 4.8% 95.9%;
+      --muted-foreground: 240 3.8% 46.1%;
+
+      --accent: 240 4.8% 95.9%;
+      --accent-foreground: 240 5.9% 10%;
+
+      --destructive: 0 84.2% 60.2%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 240 5.9% 90%;
+      --input: 240 5.9% 90%;
+      --ring: 240 10% 3.9%;
+
+      --radius: 0.5rem;
    }

-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+    .dark {
+      --background: 240 10% 3.9%;
+      --foreground: 0 0% 98%;
+
+      --card: 240 10% 3.9%;
+      --card-foreground: 0 0% 98%;
+
+      --popover: 240 10% 3.9%;
+      --popover-foreground: 0 0% 98%;
+
+      --primary: 0 0% 98%;
+      --primary-foreground: 240 5.9% 10%;
+
+      --secondary: 240 3.7% 15.9%;
+      --secondary-foreground: 0 0% 98%;
+
+      --muted: 240 3.7% 15.9%;
+      --muted-foreground: 240 5% 64.9%;
+
+      --accent: 240 3.7% 15.9%;
+      --accent-foreground: 0 0% 98%;
+
+      --destructive: 0 62.8% 30.6%;
+      --destructive-foreground: 0 0% 98%;
+
+      --border: 240 3.7% 15.9%;
+      --input: 240 3.7% 15.9%;
+      --ring: 240 4.9% 83.9%;
    }
  }

+  @layer base {
+    * {
+      @apply border-border;
+    }
    body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-@layer utilities {
-  .text-balance {
-    text-wrap: balance;
+      @apply bg-background text-foreground;
    }
  }
--- a/app/layout.tsx
+++ b/app/layout.tsx
@ -1,8 +1,12 @@
 import type { Metadata } from "next";
-import { Inter } from "next/font/google";
+import { Inter, Noto_Sans_KR } from "next/font/google";
 import "./globals.css";
+import { cn } from "@/lib/utils";

-const inter = Inter({ subsets: ["latin"] });
+const NotoSansKR = Noto_Sans_KR({
+   subsets: ["latin"],
+  variable: "--font-sans",
+});

 export const metadata: Metadata = {
  title: "Create Next App",
@ -15,8 +19,9 @@ export default function RootLayout({
  children: React.ReactNode;
 }>) {
  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
+    <html lang="ko">
+      <head />
+      <body className={cn("min-h-dvh bg-background font-sans antialiased", NotoSansKR.variable)}>{children}</body>
    </html>
  );
 }
--- a/app/order/action.ts
+++ b/app/order/action.ts
@ -0,0 +1,31 @@
+"use server";
+
+import { Order } from "@/hooks/useOrder";
+import { saveOrder, Payment, cancelOrder, completeOrder } from "@/lib/db";
+import { revalidatePath } from "next/cache";
+
+export async function saveOrderApi(orders: Order[], payment: Payment){
+    console.log(orders, "주문");
+
+    // db에 주문 저장
+    const id = await saveOrder(orders, payment);
+    // cache revaildation
+    revalidatePath("/", "page");
+
+    return {
+        id,
+        completed : false,
+        orders: orders,
+    };
+}
+
+export async function cancelOrderApi(uid: string){
+    await cancelOrder(uid);
+    revalidatePath("/", "page");
+}
+
+export async function completeOrderApi(uid: string, completed: boolean = true){
+    await completeOrder(uid, completed);
+    revalidatePath("/", "page");
+    revalidatePath("/stat", "page");
+}
--- a/app/order/page.tsx
+++ b/app/order/page.tsx
@ -0,0 +1,20 @@
+"use server";
+
+
+import { readMenu } from "../../lib/readCsv";
+import OrderComponent from "@/components/order";
+import NavMenu from "@/components/NavMenu";
+
+export default async function Order() {
+    //read csv file
+    const menu = await readMenu();
+    const categories = [...(new Set(menu.map(item => item.category)))];
+    return (
+        <div className="">
+                <NavMenu />
+            <div className="p-4">
+                <OrderComponent menus={menu} categories={categories} />
+            </div>
+        </div>
+    );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@ -1,113 +1,22 @@
-import Image from "next/image";
+import OrderCard from "@/components/orderCard";
+import { loadOrder } from "@/lib/db";
+import NavMenu from "@/components/NavMenu";

-export default function Home() {
+export default async function Home() {
+  const orders = await loadOrder();
  return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
+    <main className="min-h-screen">
+        <NavMenu />
+      {orders.length === 0 && (
+        <div className="flex items-center justify-center h-[calc(100vh-4rem)]">
+          <p className="text-muted-foreground text-2xl">주문이 없습니다.</p>
        </div>
+      )}
+      <section className="grid grid-cols-[repeat(auto-fill,_minmax(300px,_auto))] p-4 gap-2">
+        {orders.map((order) => (
+          <OrderCard key={order.id} order={order} />
+        ))}
+      </section>
    </main>
  );
 }
--- a/app/stat/page.tsx
+++ b/app/stat/page.tsx
@ -0,0 +1,65 @@
+import NavMenu from "@/components/NavMenu";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Order } from "@/hooks/useOrder";
+import { loadOrder } from "@/lib/db";
+
+function StatItem({title, value}: {title: string, value: string}) {
+    return <div className="flex flex-col">
+        <p className="text-muted-foreground text-sm">{title}</p>
+        <p className="text-lg">{value}</p>
+    </div>
+}
+
+function sum (...args: number[]) {
+    return args.reduce((acc, cur) => acc + cur, 0);
+}
+
+function ordersSum(orders: Order[]){
+    return orders.reduce((acc, cur) => acc + cur.price * cur.quantity * 1000, 0);
+}
+
+export default async function Stat() {
+    const orders = await loadOrder();
+    const completed_order= orders.filter(order => order.completed === 1);
+    const cash_order = completed_order.filter(order => order.payment === "cash");
+    const account_order = completed_order.filter(order => order.payment === "account");
+    return <div className="">
+        <NavMenu />
+        <div className="p-4">
+            <Card>
+                <CardHeader>
+                    <CardTitle>주문통계</CardTitle>
+                </CardHeader>
+                <CardContent>
+                    <div className="grid grid-cols-2">
+                        <StatItem title="총 주문 수" value={orders.length.toString()} />
+                        <StatItem title="완료된 주문 수" value={completed_order.length.toString()} />
+                        <StatItem title="현금 결제 주문 수" value={cash_order.length.toString()} />
+                        <StatItem title="계좌 이체 주문 수" value={account_order.length.toString()} />
+                    </div>
+                    <hr className="my-2" />
+                    <div className="grid grid-cols-2">
+                        <StatItem title="총 매출" value={sum(...completed_order.map(order=> ordersSum(order.orders)))
+                            .toLocaleString("ko-KR", {
+                                style: "currency",
+                                currency: "KRW",
+                            })
+                        } />
+                        <StatItem title="현금 매출" value={sum(...cash_order.map(order=> ordersSum(order.orders)))
+                            .toLocaleString("ko-KR", {
+                                style: "currency",
+                                currency: "KRW",
+                            })
+                        } />
+                        <StatItem title="계좌 매출" value={sum(...account_order.map(order=> ordersSum(order.orders)))
+                            .toLocaleString("ko-KR", {
+                                style: "currency",
+                                currency: "KRW",
+                            })
+                        } />
+                    </div>
+                </CardContent>
+            </Card>
+        </div>
+    </div>
+}
--- a/components.json
+++ b/components.json
@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}
--- a/components/NavMenu.tsx
+++ b/components/NavMenu.tsx
@ -0,0 +1,37 @@
+"use client";
+
+import Link from "next/link";
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    navigationMenuTriggerStyle
+} from "./ui/navigation-menu";
+
+
+export default function NavMenu() {
+    return <header className="sticky top-0 z-50 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+        <div className="container flex h-14 max-w-screen-xl">
+            <NavigationMenu>
+                <NavigationMenuList>
+                    <NavigationMenuItem>
+                        <Link href="/" legacyBehavior passHref>
+                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>홈</NavigationMenuLink>
+                        </Link>
+                    </NavigationMenuItem>
+                    <NavigationMenuItem>
+                        <Link href="/order" legacyBehavior passHref>
+                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>주문</NavigationMenuLink>
+                        </Link>
+                    </NavigationMenuItem>
+                    <NavigationMenuItem>
+                        <Link href="/stat" legacyBehavior passHref>
+                            <NavigationMenuLink className={navigationMenuTriggerStyle()}>통계</NavigationMenuLink>
+                        </Link>
+                    </NavigationMenuItem>
+                </NavigationMenuList>
+            </NavigationMenu>
+        </div>
+    </header>
+}
--- a/components/menu.tsx
+++ b/components/menu.tsx
@ -0,0 +1,78 @@
+import { MenuItem } from "@/lib/readCsv";
+import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
+import { Dispatch } from "react";
+import { OrderAction } from "@/hooks/useOrder";
+import { cn } from "@/lib/utils";
+import { Button } from "./ui/button";
+
+export default function Menu({
+    menus,
+    categories,
+    dispatch
+}: {
+    menus: MenuItem[];
+    categories: string[];
+    dispatch: Dispatch<OrderAction>
+}) {
+    const menu = menus;
+    return <Tabs defaultValue={categories[0]}>
+        <TabsList>
+            {[...categories].map(category => (
+                <TabsTrigger key={category} value={category}>{category}</TabsTrigger>
+            ))}
+        </TabsList>
+
+        {
+            [...categories].map(category => (
+                <TabsContent key={category} value={category}>
+                    <Card>
+                        <CardHeader>
+                            <CardTitle>{category}</CardTitle>
+                        </CardHeader>
+                        <CardContent>
+                            
+                            <ul className="w-full flex flex-col">
+                                <li className="flex gap-2">
+                                    <span className="w-80 text-lg">Name</span>
+                                    <span className="w-12 text-lg">HOT</span>
+                                    <span className="w-12 text-lg">COLD</span>
+                                </li>
+                                <hr className=""/>
+                                {menu.filter(item => item.category === category).map((item,index) => (
+                                    <li key={item.name} className={cn("flex h-10 items-center gap-2", index % 2 === 0 ? "bg-accent" : "")}>
+                                        <span  className="w-80">{item.name}</span>    
+                                        <span className="w-12">{item.HOT}</span>
+                                        <span className="w-12">{item.COLD}</span>
+                                        <Button variant="outline" className="bg-sky-400 hover:bg-sky-500" 
+                                        disabled={!item.COLD}
+                                        onClick={() => {
+                                            dispatch({ type: "ADD_ORDER", order: { 
+                                                name: item.name, 
+                                                HOT: false,
+                                                price: item.COLD ?? 0,
+                                                quantity: 1,
+                                            }});
+                                        }}
+                                        >ICE Order</Button>
+                                        <Button variant="outline" className="bg-red-400 hover:bg-red-500"
+                                        disabled={!item.HOT}
+                                        onClick={() => {
+                                            dispatch({ type: "ADD_ORDER", order: { 
+                                                name: item.name, 
+                                                HOT: true,
+                                                price: item.HOT ?? 0,
+                                                quantity: 1,
+                                            }});
+                                        }}
+                                        >HOT Order</Button>
+                                    </li>
+                                ))}
+                            </ul>
+                        </CardContent>
+                    </Card>
+                </TabsContent>
+            ))
+        }
+    </Tabs>
+}
--- a/components/order.tsx
+++ b/components/order.tsx
@ -0,0 +1,95 @@
+"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>
+        </>
+    );
+}
--- a/components/orderCard.tsx
+++ b/components/orderCard.tsx
@ -0,0 +1,63 @@
+"use client";
+
+import { OrderStateColumns } from "@/lib/types";
+import { cancelOrderApi, completeOrderApi } from "@/app/order/action";
+import { Button } from "./ui/button";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./ui/card";
+import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "./ui/drawer";
+import { Pencil2Icon, TrashIcon } from "@radix-ui/react-icons";
+
+export default function OrderCard({
+    order,
+}: {
+    order: OrderStateColumns;
+}) {
+    return <Card className="flex flex-col h-60">
+        <CardHeader className="relative">
+            <div className="absolute right-2">
+                <Drawer>
+                    <DrawerTrigger asChild>
+                        <Button variant="ghost" disabled={order.completed == 1}>
+                            <TrashIcon />
+                        </Button>
+                    </DrawerTrigger>
+                    <DrawerContent>
+                        <DrawerHeader>
+                            <DrawerTitle>
+                                주문 취소
+                            </DrawerTitle>
+                            <DrawerDescription>
+                                정말로 주문을 취소하시겠습니까?
+                            </DrawerDescription>
+                        </DrawerHeader>
+                        <DrawerClose asChild>
+                            <Button onClick={() => {
+                                cancelOrderApi(order.id);
+                            }}>취소</Button>
+                        </DrawerClose>
+                    </DrawerContent>
+                </Drawer>
+            </div>
+            <CardTitle className={order.completed == 1 ? "text-muted-foreground" : ""} >{order.id.split("/")[1]}번 주문</CardTitle>
+            <CardDescription>{order.completed ? "완료" : "대기중..."}</CardDescription>
+        </CardHeader>
+        <CardContent className="flex-1 overflow-scroll">
+            <hr />
+            {order.orders.map((item) => (
+                <div key={item.name}>
+                    <span>{item.HOT ? "HOT" : "COLD"} {item.name} {item.quantity}</span>
+                </div>
+            ))}
+        </CardContent>
+        <CardFooter>
+            <Button onClick={() => {
+                if (order.completed) {
+                    completeOrderApi(order.id, false);
+                }
+                else {
+                    completeOrderApi(order.id);
+                }
+            }}>{order.completed == 0 ? "완료" : "완료 취소"}</Button>
+        </CardFooter>
+    </Card>
+}
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        outline:
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
--- a/components/ui/card.tsx
+++ b/components/ui/card.tsx
@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
--- a/components/ui/drawer.tsx
+++ b/components/ui/drawer.tsx
@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}
--- a/components/ui/navigation-menu.tsx
+++ b/components/ui/navigation-menu.tsx
@ -0,0 +1,128 @@
+import * as React from "react"
+import { ChevronDownIcon } from "@radix-ui/react-icons"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}
+  >
+    {children}{" "}
+    <ChevronDownIcon
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
+      className
+    )}
+    {...props}
+  />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
+>(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef<
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
+>(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}
+  >
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}
--- a/components/ui/tabs.tsx
+++ b/components/ui/tabs.tsx
@ -0,0 +1,55 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props}
+  />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef<
+  React.ElementRef<typeof TabsPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props}
+  />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }
--- a/hooks/useOrder.ts
+++ b/hooks/useOrder.ts
@ -0,0 +1,69 @@
+import { useReducer } from "react";
+
+export interface Order {
+    name: string;
+    quantity: number;
+    HOT: boolean;
+    price: number;
+};
+
+interface OrderState {
+    orders: Order[];
+};
+
+const initialState = {
+    orders: [],
+} as OrderState;
+
+export type OrderAction =
+    | { type: "ADD_ORDER"; order: Order }
+    | { type: "REMOVE_ORDER"; order: Order }
+    | { type: "UPDATE_ORDER"; order: Order };
+
+function compareOrder(a: Order, b: Order) {
+    if (a.name < b.name) {
+        return -1;
+    }
+    if (a.name > b.name) {
+        return 1;
+    }
+    if (a.HOT && !b.HOT) {
+        return -1;
+    }
+    if (!a.HOT && b.HOT) {
+        return 1;
+    }
+    return 0;
+}
+
+function reducer(state: OrderState, action: OrderAction): OrderState {
+    switch (action.type) {
+        case "ADD_ORDER":
+            if (state.orders.find(order => compareOrder(order, action.order) === 0)) {
+                return {
+                    orders: state.orders.map(order => compareOrder(order, action.order) === 0 ? {
+                        ...order,
+                        quantity: Math.max(order.quantity + action.order.quantity, 0)
+                    } : order),
+                };
+            }
+            return {
+                orders: [...state.orders, action.order],
+            };
+        case "REMOVE_ORDER":
+            return {
+                orders: state.orders.filter(order => compareOrder(order, action.order) !== 0),
+            };
+        case "UPDATE_ORDER":
+            return {
+                orders: state.orders.map(order => compareOrder(order, action.order) === 0 ? action.order : order),
+            };
+        default:
+            return state;
+    }
+}
+
+export function useOrder() {
+    const [state, dispatch] = useReducer(reducer, initialState);
+    return { state, dispatch };
+}
--- a/lib/db.ts
+++ b/lib/db.ts
@ -0,0 +1,97 @@
+import { Order } from "@/hooks/useOrder";
+import { Database, NewOrderState } from './types' // this is the Database interface we defined earlier
+import SQLite from 'better-sqlite3'
+import { Kysely, SqliteDialect } from 'kysely'
+
+const dialect = new SqliteDialect({
+    database: new SQLite('order.sqlite3'),
+})
+
+const db = new Kysely<Database>({
+    dialect,
+});
+
+export type Payment = "account" | "cash";
+
+export async function requestOrderNumber() : Promise<number> {
+    const date = new Date().toISOString().split("T")[0];
+
+    return await db.transaction().execute(async trx=> {
+        const order_number = await trx.selectFrom("Order_Number")
+            .where("id", "==", date)
+            .selectAll()
+            .executeTakeFirst();
+        if (!order_number) {
+            await trx.insertInto("Order_Number")
+                .values({
+                    id: date,
+                    number: 1,
+                })
+                .execute();
+            return 1;
+        }
+        const num = order_number.number + 1;
+        await trx.updateTable("Order_Number")
+            .set("number", num)
+            .where("id", "==", date)
+            .execute();
+        return num;
+    });
+}
+
+export async function saveOrder(order: Order[], payment: Payment) {
+    const date = new Date().toISOString().split("T")[0];
+    const num = await requestOrderNumber();
+    const id = `${date}/${num}`;
+    await db.insertInto("Order_State")
+        .values({
+            id,
+            orders: JSON.stringify(order),
+            completed: 0,
+            payment,
+        } as NewOrderState)
+        .execute();
+    return id;
+}
+
+export async function loadOrder() {
+    const orders = (await db.selectFrom("Order_State")
+        .selectAll()
+        .orderBy(["completed","id desc"])
+        .execute())
+        .map(order => ({
+            ...order,
+            orders: JSON.parse(order.orders as unknown as string) as Order[],
+        }));
+        
+    return orders;
+}
+
+export async function clearOrder() {
+    await db.deleteFrom("Order_State")
+        .execute();
+}
+
+export async function cancelOrder(order_id: string) {
+    await db.deleteFrom("Order_State")
+        .where("id", "==", order_id)
+        .execute();
+}
+
+export async function completeOrder(uid: string, completed: boolean = true) {
+    await db.updateTable("Order_State")
+        .set("completed", completed ? 1 : 0)
+        .where("id", "==", uid)
+        .execute();
+}
+
+export async function loadOrderById(uid: string) {
+    const order = await db.selectFrom("Order_State")
+        .where("id", "==", uid)
+        .selectAll()
+        .executeTakeFirst();
+    return order ? {
+        ...order,
+        orders: JSON.parse(order.orders as unknown as string) as Order[],
+    } : null;
+}
--- a/lib/readCsv.tsx
+++ b/lib/readCsv.tsx
@ -0,0 +1,25 @@
+import { readFile } from "fs/promises";
+
+export type MenuItem =  {
+    name: string;
+    HOT: number | null;
+    COLD: number | null;
+    category: string;
+};
+
+export const readMenu = async () => {
+    const file = await readFile('public/menu.csv', 'utf-8');
+    const [headersRaw, ...rows] = file.split('\n').map(row => row.trim()).filter(row => row.length > 0);
+    const headers = headersRaw.split(',').map(header => header.trim());
+    
+    const data = rows.map(row => {
+        const items = row.split(',');
+        return {
+            name: items[0].trim(),
+            HOT: Number.parseFloat(items[1].trim()) || null,
+            COLD: Number.parseFloat(items[2].trim()) || null,
+            category: items[3].trim(),
+        } satisfies MenuItem;
+    });
+    return data;
+};
--- a/lib/types.ts
+++ b/lib/types.ts
@ -0,0 +1,34 @@
+import {
+    ColumnType,
+    Generated,
+    Insertable,
+    JSONColumnType,
+    Selectable,
+    Updateable
+  } from 'kysely';
+import { Order } from "@/hooks/useOrder";
+
+export interface OrderState {
+    id: string;
+    orders: JSONColumnType<Order[]>;
+    completed: 0 | 1;
+    payment: string;
+}
+
+export type NewOrderState = Insertable<OrderState>;
+export type OrderStateColumns = Selectable<OrderState>;
+export type OrderStateUpdate = Updateable<OrderState>;
+
+export interface OrderNumber {
+    id: string;
+    number: number;
+}
+
+export type NewOrderNumber = Insertable<OrderNumber>;
+export type OrderNumberColumns = Selectable<OrderNumber>;
+export type OrderNumberUpdate = Updateable<OrderNumber>;
+
+export interface Database {
+    Order_State: OrderState;
+    Order_Number: OrderNumber;
+}
--- a/lib/utils.ts
+++ b/lib/utils.ts
@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
--- a/migrate.ts
+++ b/migrate.ts
@ -0,0 +1,54 @@
+import * as path from 'path'
+
+import { promises as fs } from 'fs'
+import {
+  Kysely,
+  Migrator,
+  SqliteDialect,
+  FileMigrationProvider,
+} from 'kysely'
+import SQLite from "better-sqlite3";
+import { Database } from './lib/types';
+
+export async function migrateToLatest() {
+    const __dirname = path.resolve();
+  const db = new Kysely<Database>({
+    dialect: new SqliteDialect({
+        database: new SQLite("order.sqlite3"),
+    }),
+  })
+
+  const { up } = await import('./migration/2024-04-19');
+
+  await up(db);
+
+//   const migrator = new Migrator({
+//     db,
+//     provider: new FileMigrationProvider({
+//       fs,
+//       path,
+//       // This needs to be an absolute path.
+//       migrationFolder: path.join(__dirname, './migration'),
+//     }),
+//   })
+
+//   const { error, results } = await migrator.migrateToLatest()
+
+//   results?.forEach((it) => {
+//     if (it.status === 'Success') {
+//       console.log(`migration "${it.migrationName}" was executed successfully`)
+//     } else if (it.status === 'Error') {
+//       console.error(`failed to execute migration "${it.migrationName}"`)
+//     }
+//   })
+
+//   if (error) {
+//     console.error('failed to migrate')
+//     console.error(error)
+//     process.exit(1)
+//   }
+
+  await db.destroy()
+}
+
+migrateToLatest()
--- a/migration/2024-04-19.ts
+++ b/migration/2024-04-19.ts
@ -0,0 +1,22 @@
+import { Kysely } from 'kysely'
+
+export async function up(db: Kysely<any>): Promise<void> {
+  await db.schema
+    .createTable('Order_State')
+    .addColumn('id', 'varchar', col => col.primaryKey().notNull())
+    .addColumn('orders', 'jsonb', col => col.notNull())
+    .addColumn('completed', 'boolean', col => col.notNull())
+    .addColumn('payment', 'varchar', col => col.notNull())
+    .execute()
+  await db.schema
+    .createTable('Order_Number')
+    // current date. (e.g. 2024-04-19)
+    .addColumn('id', 'varchar', col => col.primaryKey().notNull())
+    .addColumn('number', 'integer', col => col.notNull())
+    .execute()
+}
+
+export async function down(db: Kysely<any>): Promise<void> {
+    await db.schema.dropTable('Order_State').execute()
+    await db.schema.dropTable('Order_Number').execute()
+}
--- a/next.config.mjs
+++ b/next.config.mjs
@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    experimental: {
+        serverComponentsExternalPackages: ["@deno/kv"]
+    }
+};

 export default nextConfig;
--- a/package.json
+++ b/package.json
@ -6,21 +6,39 @@
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "shadcn": "shadcn-ui"
  },
+  "type": "module",
  "dependencies": {
+    "@deno/kv": "^0.7.0",
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-tabs": "^1.0.4",
+    "better-sqlite3": "^9.5.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "kysely": "^0.27.3",
+    "next": "14.2.1",
    "react": "^18",
    "react-dom": "^18",
-    "next": "14.2.1"
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7",
+    "tsx": "^4.7.2",
+    "vaul": "^0.9.0"
  },
  "devDependencies": {
-    "typescript": "^5",
+    "@types/better-sqlite3": "^7.6.9",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
    "eslint": "^8",
-    "eslint-config-next": "14.2.1"
+    "eslint-config-next": "14.2.1",
+    "postcss": "^8",
+    "shadcn-ui": "^0.8.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/menu.csv
+++ b/public/menu.csv
@ -0,0 +1,26 @@
+name,HOT,COLD,category
+아메리카노,1.5,2,커피
+헤이즐넛 아메리카노,1.5,2,커피
+바닐라 아메리카노,1.5,2,커피
+꿀단지 커피,2.5,3,커피
+곰다방커피,,2,커피
+콜드브루,,2,커피
+카페모카,2,2.5,커피
+카페라떼,3,3.5,카페라떼
+헤이즐넛 카페라떼,3,3.5,카페라떼
+바닐라 카페라떼,3,3.5,카페라떼
+초코라떼,3,3.5,카페라떼
+딸기라떼,3,3.5,카페라떼
+사과유자차,3,3.5,차
+꿀유자차,2,2.5,차
+폴라복숭아,,2.5,차
+허니자몽 블랙티,2.5,3,차
+오미자 차,2,2.5,차
+달곰상곰 딸기레몬,3.5,3.5,탄산
+청포도 에이드,3,3,탄산
+자몽에이드,3,3,탄산
+레몬에이드,3,3,탄산
+오미자 에이드,3,3,탄산
+허니브레드,,3,빵
+소금빵,,3,빵
+크로크무슈,,3.5,빵
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@ -1,20 +1,84 @@
-import type { Config } from "tailwindcss";
+import type { Config } from "tailwindcss"
+import defaultTheme from "tailwindcss/defaultTheme"

-const config: Config = {
+const config = {
+  darkMode: ["class"],
  content: [
-    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
 	],
+  prefix: "",
  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
    extend: {
-      backgroundImage: {
-        "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
-        "gradient-conic":
-          "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+      fontFamily: {
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
-  plugins: [],
-};
-export default config;
+  plugins: [require("tailwindcss-animate")],
+} satisfies Config
+
+export default config
--- a/tsconfig.json
+++ b/tsconfig.json
@ -10,6 +10,7 @@
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
+    "target": "ESNext",
    "jsx": "preserve",
    "incremental": true,
    "plugins": [