simple-kiosk/src/client/components/menu/AddMenuItem.tsx

import { Button } from "@/components/ui/button";
import {
  Drawer,
  DrawerContent,
  DrawerDescription,
  DrawerFooter,
  DrawerHeader,
  DrawerTitle,
  DrawerTrigger,
} from "@/components/ui/drawer";
import { Input } from "@/components/ui/input";
import { useAddMenuItem } from "@/hooks/useMenu";
import { useQueryClient } from "@tanstack/react-query";
import { useState } from "react";
import { MenuItemColumns } from "src/db";
import { MenuInput } from "./MenuInput.tsx";

export function AddMenuItem() {
  const queryClient = useQueryClient();
  const { mutate, isPending } = useAddMenuItem(queryClient);
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [data, setData] = useState<MenuItemColumns>({
    name: "",
    category: "",
    HOT: null,
    COLD: null,
    price: null,
  });

  return (
    <Drawer open={drawerOpen} onOpenChange={setDrawerOpen}>
      <DrawerTrigger asChild>
        <div className="border p-4 hover:bg-accent flex items-center justify-center">
          <h2 className="text-xl font-bold">메뉴 추가</h2>
        </div>
      </DrawerTrigger>
      <DrawerContent>
        <DrawerHeader>
          <DrawerTitle>메뉴 추가</DrawerTitle>
          <DrawerDescription>메뉴를 추가합니다.</DrawerDescription>
        </DrawerHeader>
        <div className="m-4">
          <div className="mb-2">
            <div className="text-muted-foreground">메뉴 이름</div>
            <Input
              value={data.name}
              onChange={(e) =>
                setData({
                  ...data,
                  name: e.target.value,
                })}
            />
          </div>
          <MenuInput
            data={data}
            onChange={(c) => {
              setData({
                ...data,
                ...c,
              });
            }}
          />
        </div>
        <DrawerFooter>
          <Button
            variant="default"
            disabled={isPending}
            onClick={() => {
              mutate(data, {
                onSuccess: () => {
                  setData({
                    name: "",
                    category: "",
                    HOT: null,
                    COLD: null,
                    price: null,
                  });
                  setDrawerOpen(false);
                },
              });
            }}
          >
            추가하기
          </Button>
        </DrawerFooter>
      </DrawerContent>
    </Drawer>
  );
}