feat: react-hook-form 적용

Author: MU-Software

packages/shop/src/components/common/option_group_input.tsx

@@ -1,6 +1,7 @@
 import { CircularProgress, FormControl, InputLabel, MenuItem, Select, TextField, Tooltip } from "@mui/material";
 import { Suspense } from "@suspensive/react";
 import * as React from "react";
+import { Control, Controller, FieldValues } from "react-hook-form";
 import * as R from "remeda";
 
 import { PriceDisplay } from "./price_display";
@@ -33,7 +34,8 @@ const SelectableOptionGroupInput: React.FC<{
   defaultValue?: string;
   disabled?: boolean;
   disabledReason?: string;
-}> = ({ language, optionGroup, options, defaultValue, disabled, disabledReason }) => {
+  control: Control<FieldValues, unknown, FieldValues>;
+}> = ({ language, optionGroup, options, defaultValue, disabled, disabledReason, control }) => {
   const optionElements = options.map((option) => {
     const isOptionOutOfStock = R.isNumber(option.leftover_stock) && option.leftover_stock <= 0;
 
@@ -54,9 +56,14 @@ const SelectableOptionGroupInput: React.FC<{
   const selectElement = (
     <FormControl fullWidth>
       <InputLabel id={`${optionGroup.id}label`}>{optionGroup.name}</InputLabel>
-      <Select label={`${optionGroup.id}label`} name={optionGroup.id} defaultValue={defaultValue} disabled={disabled} required>
-        {optionElements}
-      </Select>
+      <Controller
+        control={control}
+        name={optionGroup.id}
+        rules={{ required: true }}
+        disabled={disabled}
+        defaultValue={defaultValue || ""}
+        render={({ field }) => <Select label={`${optionGroup.id}label`} {...field} children={optionElements} />}
+      />
     </FormControl>
   );
 
@@ -68,17 +75,19 @@ const CustomResponseOptionGroupInput: React.FC<{
   defaultValue?: string;
   disabled?: boolean;
   disabledReason?: string;
-}> = ({ optionGroup, defaultValue, disabled, disabledReason }) => {
-  const pattern = ShopAPIUtil.getCustomResponsePattern(optionGroup)?.source;
-
+  control: Control<FieldValues, unknown, FieldValues>;
+}> = ({ optionGroup, defaultValue, disabled, disabledReason, control }) => {
   const textFieldElement = (
-    <TextField
-      label={optionGroup.name}
+    <Controller
+      control={control}
       name={optionGroup.id}
-      required
-      defaultValue={defaultValue}
+      rules={{ pattern: ShopAPIUtil.getCustomResponsePattern(optionGroup), required: true }}
       disabled={disabled}
-      slotProps={{ htmlInput: { pattern } }}
+      defaultValue={defaultValue || ""}
+      render={({ field, formState: { errors } }) => {
+        const errorMessage: string | undefined = errors?.[optionGroup.id]?.message?.toString();
+        return <TextField label={optionGroup.name} {...field} error={!!errors[optionGroup.id]} helperText={errorMessage} />;
+      }}
     />
   );
 
@@ -93,9 +102,17 @@ export const OptionGroupInput: React.FC<{
   defaultValue?: string;
   disabled?: boolean;
   disabledReason?: string;
-}> = ({ language, optionGroup, options, defaultValue, disabled, disabledReason }) =>
+
+  control: Control<FieldValues, unknown, FieldValues>;
+}> = ({ language, optionGroup, options, defaultValue, disabled, disabledReason, control }) =>
   optionGroup.is_custom_response ? (
-    <CustomResponseOptionGroupInput optionGroup={optionGroup} defaultValue={defaultValue} disabled={disabled} disabledReason={disabledReason} />
+    <CustomResponseOptionGroupInput
+      optionGroup={optionGroup}
+      defaultValue={defaultValue}
+      disabled={disabled}
+      disabledReason={disabledReason}
+      control={control}
+    />
   ) : (
     <SelectableOptionGroupInput
       language={language || "ko"}
@@ -104,14 +121,16 @@ export const OptionGroupInput: React.FC<{
       defaultValue={defaultValue}
       disabled={disabled}
       disabledReason={disabledReason}
+      control={control}
     />
   );
 
 export const OrderProductRelationOptionInput: React.FC<{
   optionRel: ShopSchemas.OrderProductItem["options"][number];
   disabled?: boolean;
   disabledReason?: string;
-}> = Suspense.with({ fallback: <CircularProgress /> }, ({ optionRel, disabled, disabledReason }) => {
+  control: Control<FieldValues, unknown, FieldValues>;
+}> = Suspense.with({ fallback: <CircularProgress /> }, ({ optionRel, disabled, disabledReason, control }) => {
   const { language } = ShopHooks.useShopContext();
   let defaultValue: string | null = null;
   let guessedDisabledReason: string | undefined = undefined;
@@ -147,6 +166,7 @@ export const OrderProductRelationOptionInput: React.FC<{
       defaultValue={defaultValue || undefined}
       disabled={disabled || !ShopAPIUtil.isOrderProductOptionModifiable(optionRel)}
       disabledReason={disabledReason || guessedDisabledReason}
+      control={control}
     />
   );
 });

packages/shop/src/components/features/cart.tsx

@@ -4,6 +4,7 @@ import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { useQueryClient } from "@tanstack/react-query";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
+import { useForm } from "react-hook-form";
 import { useNavigate } from "react-router-dom";
 import * as R from "remeda";
 
@@ -20,6 +21,7 @@ const CartItem: React.FC<
     disabled?: boolean;
   }
 > = ({ language, cartProdRel, disabled, removeItemFromCartFunc, ...props }) => {
+  const { control } = useForm<Record<string, unknown>>();
   const cannotModifyOptionsStr =
     language === "ko"
       ? "상품 옵션을 수정하려면 장바구니에서 상품을 삭제한 후 다시 담아주세요."
@@ -48,6 +50,7 @@ const CartItem: React.FC<
             optionRel={optionRel}
             disabled
             disabledReason={cannotModifyOptionsStr}
+            control={control}
           />
         ))}
       </Stack>

packages/shop/src/components/features/order.tsx

@@ -15,6 +15,7 @@ import {
 import { ErrorBoundary, Suspense } from "@suspensive/react";
 import { enqueueSnackbar, OptionsObject } from "notistack";
 import * as React from "react";
+import { useForm } from "react-hook-form";
 import * as R from "remeda";
 
 import ShopHooks from "../../hooks";
@@ -58,7 +59,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
   optionsOfOneItemInOrderPatchMutation,
   ...props
 }) => {
-  const formRef = React.useRef<HTMLFormElement>(null);
+  const { control, handleSubmit, getValues } = useForm<Record<string, string>>();
   const currentCustomOptionValues: { [k: string]: string } = prodRel.options
     .filter((optionRel) => ShopUtils.isOrderProductOptionModifiable(optionRel))
     .reduce(
@@ -73,7 +74,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
     enqueueSnackbar(c, { variant, anchorOrigin: { vertical: "bottom", horizontal: "center" } });
 
   const hasPatchableOption = Object.entries(currentCustomOptionValues).length > 0;
-  const patchOptionBtnDisabled = isPending || !hasPatchableOption;
+  const patchOptionBtnDisabled = isPending || !hasPatchableOption || order.current_status === "refunded";
 
   const refundOneProductStr = language === "ko" ? "단일 상품 환불" : "Refund one item";
   const refundedStr = language === "ko" ? "환불됨" : "Refunded";
@@ -105,9 +106,7 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
       }
     );
   const patchOneItemOptions = () => {
-    if (!Common.Utils.isFormValid(formRef.current)) throw new Error("Form is not valid");
-
-    const formValues = Common.Utils.getFormValue<{ [key: string]: string }>({ form: formRef.current });
+    const formValues = getValues();
     const modifiedCustomOptionValues: ShopSchemas.OrderOptionsPatchRequest["options"] = Object.entries(formValues)
       .map(([key, value]) => {
         // 여기서 key는 order_product_option_relation의 id가 아니라 product_option_group의 id이므로, order_product_option_relation의 id로 변경해야 함
@@ -152,19 +151,14 @@ const OrderProductRelationItem: React.FC<OrderProductRelationItemProps> = ({
       summary={<Typography variant="h6">{prodRel.product.name}</Typography>}
       actions={actionButtons}
     >
-      <form
-        ref={formRef}
-        onSubmit={(e) => {
-          e.preventDefault();
-          patchOneItemOptions();
-        }}
-      >
+      <form onSubmit={handleSubmit(() => {})}>
         <Stack spacing={2} sx={{ width: "100%" }}>
           {prodRel.options.map((optionRel) => (
             <CommonComponents.OrderProductRelationOptionInput
               key={optionRel.product_option_group.id + (optionRel.product_option?.id || "")}
               optionRel={optionRel}
               disabled={isPending}
+              control={control}
             />
           ))}
         </Stack>