feat: seriesFormModal react-hook-form 전환

client/components/post/PostForm/PostForm.tsx

@@ -18,11 +18,11 @@ import {
   Selector,
   Editor,
   ImageUploader,
+  Button,
 } from "@components/shared/Form";
 import SeriesCreateModalOpenButton from "./SeriesCreateModalOpenButton";
 import { toast } from "react-toastify";
 import { revalidatePost, revalidateSeries } from "@utils";
-import Button from "@components/shared/Form/Button";
 
 interface Props {
   mode: "write" | "edit";

client/components/post/PostForm/SeriesCreateModalOpenButton.tsx

@@ -2,7 +2,7 @@ import { useOverlay } from "@hooks";
 import React from "react";
 import styles from "./styles.module.scss";
 import { OVERLAYS } from "@components/shared/Overlays/Overlays";
-import Button from "@components/shared/Form/Button";
+import { Button } from "@components/shared/Form";
 
 const SeriesCreateModalOpenButton = () => {
   const { openOverlay } = useOverlay();

client/components/shared/Form/index.ts

@@ -4,3 +4,4 @@ export { default as Input } from "./Input";
 export { default as CheckBox } from "./CheckBox";
 export { default as Editor } from "./Editor";
 export { default as ImageUploader } from "./ImageUploader";
+export { default as Button } from "./Button";

client/components/shared/Overlays/AuthModal/LoginForm.tsx

@@ -5,8 +5,8 @@ import { toast } from "react-toastify";
 import { MESSAGE } from "@constants";
 import { UserFormDataType } from "@Types/user";
 import { useForm, type SubmitHandler } from "react-hook-form";
-import { ErrorMsg, Input } from "@components/shared/Form";
-import Button from "@components/shared/Form/Button";
+import { ErrorMsg, Input, Button } from "@components/shared/Form";
+
 interface Props {
   onClose: () => void;
   openSignUpModal: () => void;

client/components/shared/Overlays/AuthModal/SignUpForm.tsx

@@ -5,8 +5,7 @@ import { toast } from "react-toastify";
 import { MESSAGE } from "@constants";
 import { useForm, type SubmitHandler } from "react-hook-form";
 import { UserFormDataType } from "@Types/user";
-import { ErrorMsg, Input } from "@components/shared/Form";
-import Button from "@components/shared/Form/Button";
+import { ErrorMsg, Input, Button } from "@components/shared/Form";
 
 interface Props {
   onClose: () => void;
@@ -19,7 +18,7 @@ const SignUpForm = ({ onClose }: Props) => {
     register,
     handleSubmit,
     watch,
-    formState: { errors, isValid },
+    formState: { errors },
   } = useForm<SignUpFormType>();
 
   const { mutate: signUpMutate } = useSignUp({

client/components/shared/Overlays/SeriesFormModal/SeriesFormModal.tsx

@@ -1,87 +1,56 @@
 import { useAddSeries } from "@hooks/query";
-import ImageUploader from "@components/shared/ImageUploader";
 import ModalView from "@components/shared/ModalView/ModalView";
 import { MESSAGE } from "@constants";
-import React, {
-  useCallback,
-  useRef,
-  useState,
-  type ChangeEvent,
-  FormEventHandler,
-} from "react";
+import React, { useCallback } from "react";
 import { toast } from "react-toastify";
 import styles from "./styles.module.scss";
 import { revalidateSeries } from "@utils";
-import { Input } from "@components/shared/Form";
-import Button from "@components/shared/Form/Button";
+import { Input, ImageUploader, Button } from "@components/shared/Form";
+import { Controller, SubmitHandler, useForm } from "react-hook-form";
 
 interface Props {
   onClose: () => void;
 }
 
 const SeriesFormModal = ({ onClose }: Props) => {
-  const titleRef = useRef<HTMLInputElement | null>(null);
-  const shortDescriptionRef = useRef<HTMLInputElement | null>(null);
-  const [thumbNailUrl, setThumbNailUrl] = useState("");
+  const { register, handleSubmit, control } =
+    useForm<Parameters<typeof mutate>[0]>();
 
   const { mutate } = useAddSeries({
     onSuccess: () => {
-      console.log("called");
       toast.success(MESSAGE.ADD_SERIES_SUCCESS);
     },
   });
 
-  const onImageUploadeSuccess = useCallback((imageUrl: string) => {
-    setThumbNailUrl(imageUrl);
-  }, []);
-
-  const onChangeThumbUrl = useCallback((e: ChangeEvent<HTMLInputElement>) => {
-    setThumbNailUrl(e.target.value);
-  }, []);
-
-  const onSubmit: FormEventHandler = useCallback(
-    (e) => {
-      if (!titleRef.current || !shortDescriptionRef.current) {
-        return;
-      }
-      e.preventDefault();
-
+  const onSubmit: SubmitHandler<Parameters<typeof mutate>[0]> = useCallback(
+    ({ title, shortDescription, thumbNailUrl }) => {
       mutate({
-        title: titleRef.current.value,
-        shortDescription: shortDescriptionRef.current.value,
+        title,
+        shortDescription,
         thumbNailUrl,
       });
 
       revalidateSeries();
       onClose();
     },
-    [mutate, onClose, thumbNailUrl]
+    [mutate, onClose]
   );
 
   return (
     <ModalView title="시리즈 생성" onClose={onClose}>
-      <form className={styles.Form} onSubmit={onSubmit}>
-        <Input placeholder="제목" ref={titleRef} />
-        <Input placeholder="짧은설명" ref={shortDescriptionRef} />
-        <ImageUploader>
-          <div>
-            <ImageUploader.ImageUrlInput
-              placeholder="image url"
-              onChange={onChangeThumbUrl}
-              value={thumbNailUrl}
-            />
-            <ImageUploader.UploadButton
-              text="썸네일 설정"
-              onUploadeSuccess={onImageUploadeSuccess}
+      <form className={styles.Form} onSubmit={handleSubmit(onSubmit)}>
+        <Input placeholder="제목" {...register("title")} />
+        <Input placeholder="짧은설명" {...register("shortDescription")} />
+        <Controller
+          name="thumbNailUrl"
+          control={control}
+          render={({ field }) => (
+            <ImageUploader
+              value={field.value}
+              onChange={(imgUrl: string) => field.onChange(imgUrl)}
             />
-          </div>
-          <ImageUploader.Image
-            src={thumbNailUrl}
-            width={300}
-            height={200}
-            alt="썸네일"
-          />
-        </ImageUploader>
+          )}
+        />
         <Button>생성</Button>
       </form>
     </ModalView>