fix

app/components/molecules/ThreeDigitsInput.tsx

@@ -4,11 +4,7 @@ import {
   type ElementRef,
   forwardRef,
 } from "react";
-import {
-  InputOTP,
-  InputOTPGroup,
-  InputOTPSlot,
-} from "~/components/ui/input-otp";
+import { InputOTP, InputOTPGroup, InputOTPSlot } from "../ui/input-otp";
 
 const ThreeDigitsInput = forwardRef<
   ElementRef<typeof InputOTP>,

app/components/organisms/ItemAssign.tsx

@@ -6,10 +6,10 @@ import {
   useRef,
   useState,
 } from "react";
-import { Input } from "~/components/ui/input";
 import type { WithId } from "~/lib/typeguard";
 import { cn } from "~/lib/utils";
 import { type ItemEntity, type2label } from "~/models/item";
+import { Input } from "../ui/input";
 
 type props = {
   item: WithId<ItemEntity>;

app/components/organisms/OrderAlertDialog.tsx

@@ -1,32 +1,27 @@
+import { type ComponentPropsWithoutRef, forwardRef } from "react";
+import { type2label } from "~/models/item";
+import type { OrderEntity } from "~/models/order";
 import {
   AlertDialog,
   AlertDialogAction,
   AlertDialogCancel,
   AlertDialogContent,
   AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
   AlertDialogTitle,
-} from "@radix-ui/react-alert-dialog";
-import { type2label } from "~/models/item";
-import type { OrderEntity } from "~/models/order";
-import { AlertDialogFooter, AlertDialogHeader } from "../ui/alert-dialog";
-
-type props = {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  order: OrderEntity;
-  chargeView: number | string;
-  onSubmit: () => void;
-};
+} from "../ui/alert-dialog";
 
-const OrderAlertDialog = ({
-  open,
-  onOpenChange,
-  order,
-  chargeView,
-  onSubmit,
-}: props) => {
+const OrderAlertDialog = forwardRef<
+  null,
+  ComponentPropsWithoutRef<typeof AlertDialog> & {
+    order: OrderEntity;
+    chargeView: number | string;
+    onSubmit: () => void;
+  }
+>(({ order, chargeView, onSubmit, ...props }) => {
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
+    <AlertDialog {...props}>
       <AlertDialogContent>
         <AlertDialogHeader>
           <AlertDialogTitle>オーダーを確定しますか？</AlertDialogTitle>
@@ -69,6 +64,6 @@ const OrderAlertDialog = ({
       </AlertDialogContent>
     </AlertDialog>
   );
-};
+});
 
 export { OrderAlertDialog };

app/routes/cashier-v2.tsx

@@ -42,7 +42,7 @@ export default function Cashier() {
   const [description, setDescription] = useState("");
   const [inputStatus, setInputStatus] =
     useState<(typeof InputStatus)[number]>("discount");
-  const [DialogOpen, setDialogOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
   const [itemFocus, setItemFocus] = useState<number>(0);
 
   const discountOrderIdNum = Number(discountOrderId);
@@ -290,7 +290,7 @@ export default function Cashier() {
         </div>
       </div>
       <OrderAlertDialog
-        open
+        open={dialogOpen}
         onOpenChange={setDialogOpen}
         order={newOrder}
         chargeView={chargeView}