chore: ちょいリファクタリング

app/components/functional/useOrderState.ts

@@ -6,7 +6,7 @@ import { OrderEntity } from "~/models/order";
 type BaseAction<TypeName extends string> = { type: TypeName };
 type Action<
   TypeName extends string,
-  U = Record<never, never>,
+  U extends Record<string, unknown> = Record<never, never>,
 > = BaseAction<TypeName> & U;
 
 type Clear = Action<"clear", { effectFn?: () => void }>;

app/components/molecules/InputNumber.tsx → app/components/functional/usePreventNumberKeyUpDown.tsx

@@ -1,12 +1,9 @@
-import { type ComponentPropsWithRef, useEffect } from "react";
-import { AttractiveTextBox } from "./AttractiveTextBox";
-
-type props = ComponentPropsWithRef<typeof AttractiveTextBox>;
+import { useEffect } from "react";
 
 /**
- * 上下キーで数値を増減させない数値専用のテキストボックス
+ * 上下キーで数値を増減させないEffect
  */
-const InputNumber = ({ ...props }: props) => {
+const usePreventNumberKeyUpDown = () => {
   useEffect(() => {
     const handler = (event: KeyboardEvent) => {
       if (event.key === "ArrowUp" || event.key === "ArrowDown") {
@@ -21,8 +18,6 @@ const InputNumber = ({ ...props }: props) => {
       window.removeEventListener("keyup", handler);
     };
   }, []);
-
-  return <AttractiveTextBox type="number" {...props} />;
 };
 
-export { InputNumber };
+export { usePreventNumberKeyUpDown };

app/components/pages/CashierV2.tsx

@@ -5,9 +5,9 @@ import type { OrderEntity } from "~/models/order";
 import { useInputStatus } from "../functional/useInputStatus";
 import { useLatestOrderId } from "../functional/useLatestOrderId";
 import { useOrderState } from "../functional/useOrderState";
+import { usePreventNumberKeyUpDown } from "../functional/usePreventNumberKeyUpDown";
 import { useUISession } from "../functional/useUISession";
 import { AttractiveTextBox } from "../molecules/AttractiveTextBox";
-import { InputNumber } from "../molecules/InputNumber";
 import { ChargeView } from "../organisms/ChargeView";
 import { DiscountInput } from "../organisms/DiscountInput";
 import { OrderAlertDialog } from "../organisms/OrderAlertDialog";
@@ -31,6 +31,7 @@ const CashierV2 = ({ items, orders, submitPayload }: props) => {
     useInputStatus();
   const [UISession, renewUISession] = useUISession();
   const { nextOrderId } = useLatestOrderId(orders);
+  usePreventNumberKeyUpDown();
 
   useEffect(() => {
     newOrderDispatch({ type: "updateOrderId", orderId: nextOrderId });
@@ -117,7 +118,8 @@ const CashierV2 = ({ items, orders, submitPayload }: props) => {
               [newOrderDispatch],
             )}
           />
-          <InputNumber
+          <AttractiveTextBox
+            type="number"
             key={`Received-${UISession.key}`}
             onTextSet={useCallback(
               (text) =>

app/routes/items/route.tsx

@@ -8,6 +8,7 @@ import {
 } from "@remix-run/react";
 import { useMemo } from "react";
 import useSWRSubscription from "swr/subscription";
+import { usePreventNumberKeyUpDown } from "~/components/functional/usePreventNumberKeyUpDown";
 import { Button } from "~/components/ui/button";
 import { Input } from "~/components/ui/input";
 import { Label } from "~/components/ui/label";
@@ -59,6 +60,8 @@ export default function Item() {
     }, base);
   }, [items]);
 
+  usePreventNumberKeyUpDown();
+
   return (
     <div className="bg-white p-4 font-sans">
       <h1 className="mb-6 font-bold text-3xl text-gray-800">アイテム管理</h1>