refactor: react-hook-form 시용한 form들에 대한 리팩토링 및 간단한 JS Doc 추가

codeit-bootcamp-frontend · May 21, 2024 · ba5c1ef · ba5c1ef
1 parent 658493d
commit ba5c1ef
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 10 deletions.
diff --git a/src/feature/sign-in-form/SignInForm.tsx b/src/feature/sign-in-form/SignInForm.tsx
@@ -1,16 +1,19 @@
+import React, { useEffect, useCallback } from "react";
 import { Cta } from "@/src/ui";
 import { useSignIn } from "@/src/data-access";
 import { useTokenRedirect } from "@/src/util";
-
-import {  useForm } from "react-hook-form";
-import { useEffect } from "react";
+import { useForm } from "react-hook-form";
 import { EmailField, PasswordField } from "./fields";
 import { ERROR_MESSAGE } from "./constant";
 import styles from "./SignInForm.module.scss";
 import classNames from "classnames/bind";
 
 const cx = classNames.bind(styles);
 
+/**
+ * SignInForm 컴포넌트는 사용자 로그인 폼을 렌더링합니다.
+ * @component
+ */
 export const SignInForm = () => {
   const { control, handleSubmit, watch, setError } = useForm({
     defaultValues: { email: "", password: "" },
@@ -33,8 +36,12 @@ export const SignInForm = () => {
     }
   }, [error, setError]);
 
+  const onSubmit = useCallback(() => {
+    execute();
+  }, [execute]);
+
   return (
-    <form className={cx("form")} onSubmit={handleSubmit(execute)}>
+    <form className={cx("form")} onSubmit={handleSubmit(onSubmit)}>
       <EmailField control={control} />
       <PasswordField control={control} />
       <button className={cx("button")} type="submit">

diff --git a/src/feature/sign-in-form/fields/EmailField.tsx b/src/feature/sign-in-form/fields/EmailField.tsx
@@ -1,4 +1,5 @@
-import { Controller } from "react-hook-form";
+import React from "react";
+import { Controller, Control } from "react-hook-form";
 import { Input } from "@/src/ui";
 import { ERROR_MESSAGE, PLACEHOLDER } from "../constant";
 import styles from "../SignInForm.module.scss";
@@ -7,9 +8,14 @@ import classNames from "classnames/bind";
 const cx = classNames.bind(styles);
 
 interface EmailFieldProps {
-  control: any;
+  control: Control<any>;
 }
 
+/**
+ * EmailField 컴포넌트는 이메일 입력 필드를 렌더링합니다.
+ * @component
+ * @param {Control} control - react-hook-form의 control 객체
+ */
 export const EmailField: React.FC<EmailFieldProps> = ({ control }) => (
   <div className={cx("input-box")}>
     <label className={cx("label")}>이메일</label>
@@ -33,4 +39,4 @@ export const EmailField: React.FC<EmailFieldProps> = ({ control }) => (
       )}
     />
   </div>
-);
+);
diff --git a/src/feature/sign-in-form/fields/PasswordField.tsx b/src/feature/sign-in-form/fields/PasswordField.tsx
@@ -1,4 +1,5 @@
-import { Controller } from "react-hook-form";
+import React from "react";
+import { Controller, Control } from "react-hook-form";
 import { PasswordInput } from "@/src/ui";
 import { ERROR_MESSAGE, PLACEHOLDER } from "../constant";
 import styles from "../SignInForm.module.scss";
@@ -7,9 +8,14 @@ import classNames from "classnames/bind";
 const cx = classNames.bind(styles);
 
 interface PasswordFieldProps {
-  control: any;
+  control: Control<any>;
 }
 
+/**
+ * PasswordField 컴포넌트는 비밀번호 입력 필드를 렌더링합니다.
+ * @component
+ * @param {Control} control - react-hook-form의 control 객체
+ */
 export const PasswordField: React.FC<PasswordFieldProps> = ({ control }) => (
   <div className={cx("input-box")}>
     <label className={cx("label")}>비밀번호</label>

diff --git a/src/feature/sign-up-form/SignUpForm.tsx b/src/feature/sign-up-form/SignUpForm.tsx
@@ -1,3 +1,4 @@
+import React, { useCallback } from "react";
 import { Cta } from "@/src/ui";
 import { useSignUp } from "@/src/data-access";
 import { useTokenRedirect } from "@/src/util";
@@ -9,6 +10,10 @@ import classNames from "classnames/bind";
 
 const cx = classNames.bind(styles);
 
+/**
+ * SignUpForm 컴포넌트는 사용자 회원가입 폼을 렌더링합니다.
+ * @component
+ */
 export const SignUpForm = () => {
   const { control, handleSubmit, watch } = useForm({
     defaultValues: { email: "", password: "", confirmedPassword: "" },
@@ -22,8 +27,12 @@ export const SignUpForm = () => {
 
   useTokenRedirect(data?.data.accessToken);
 
+  const onSubmit = useCallback(() => {
+    signUp();
+  }, [signUp]);
+
   return (
-    <form className={cx("form")} onSubmit={handleSubmit(signUp)}>
+    <form className={cx("form")} onSubmit={handleSubmit(onSubmit)}>
       <EmailField control={control} watch={watch} />
       <PasswordField control={control} />
       <PasswordConfirmField control={control} watch={watch} />

diff --git a/src/feature/sign-up-form/fields/EmailField.tsx b/src/feature/sign-up-form/fields/EmailField.tsx
@@ -13,6 +13,12 @@ interface EmailInputProps {
   watch: UseFormWatch<any>;
 }
 
+/**
+ * EmailField 컴포넌트는 이메일 입력 필드를 렌더링합니다.
+ * @component
+ * @param {Control} control - react-hook-form의 control 객체
+ * @param {UseFormWatch} watch - react-hook-form의 watch 함수
+ */
 export const EmailField = ({ control, watch }: EmailInputProps) => {
   const { execute: checkEmailDuplicate } = useCheckEmailDuplicate(
     watch("email")

diff --git a/src/feature/sign-up-form/fields/PasswordConfirmField.tsx b/src/feature/sign-up-form/fields/PasswordConfirmField.tsx
@@ -12,6 +12,12 @@ interface ConfirmedPasswordInputProps {
   watch: UseFormWatch<any>;
 }
 
+/**
+ * PasswordConfirmField 컴포넌트는 비밀번호 확인 입력 필드를 렌더링합니다.
+ * @component
+ * @param {Control} control - react-hook-form의 control 객체
+ * @param {UseFormWatch} watch - react-hook-form의 watch 함수
+ */
 export const PasswordConfirmField = ({
   control,
   watch,

diff --git a/src/feature/sign-up-form/fields/PasswordField.tsx b/src/feature/sign-up-form/fields/PasswordField.tsx
@@ -11,6 +11,11 @@ interface PasswordInputProps {
   control: Control<any>;
 }
 
+/**
+ * PasswordField 컴포넌트는 비밀번호 입력 필드를 렌더링합니다.
+ * @component
+ * @param {Control} control - react-hook-form의 control 객체
+ */
 export const PasswordField = ({ control }: PasswordInputProps) => (
   <div className={cx("input-box")}>
     <label className={cx("label")}>비밀번호</label>