#202 refactor: usePasswordForm 커스텀 훅 적용 및 불필요 코드 삭제

Team-Tiki · Aug 3, 2024 · f24abad · f24abad
1 parent a221177
commit f24abad
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 67 deletions.
diff --git a/src/page/signUp/info/InfoFormPage.tsx b/src/page/signUp/info/InfoFormPage.tsx
@@ -1,44 +1,26 @@
 import { pageStyle } from '@/page/signUp/info/InfoFormPage.style';
 import InfoForm from '@/page/signUp/info/component/InfoForm/InfoForm';
 import PasswordForm from '@/page/signUp/info/component/PasswordForm/PasswordForm';
-import { useSignupMutation } from '@/page/signUp/info/hook/api/useSignupMutation';
 
-import { useState } from 'react';
 import { useMatch } from 'react-router-dom';
 
 import Flex from '@/common/component/Flex/Flex';
 import Heading from '@/common/component/Heading/Heading';
 
-import { UserInfo } from '@/shared/api/signup/info/type';
 import { PATH } from '@/shared/constant/path';
 
 const InfoFormPage = () => {
-  const [info, setInfo] = useState<UserInfo>({
-    name: '',
-    birth: '',
-    univ: '',
-    email: '',
-    password: '',
-    passwordChecker: '',
-  });
-
-  const { mutate } = useSignupMutation();
-
   const isInfoMatched = useMatch(PATH.SIGNUP_INFO);
   const isPasswordMatched = useMatch(PATH.SIGNUP_PASSWORD);
 
-  const handleComplete = (info: UserInfo) => {
-    mutate(info);
-  };
-
   return (
     <Flex tag="main" css={pageStyle}>
       <Flex tag="section" styles={{ direction: 'column', gap: '3.2rem', width: '51.1rem' }}>
         <Heading css={{ padding: '1.6rem 0' }}>회원가입</Heading>
 
-        {isInfoMatched && <InfoForm onInfoChange={setInfo} />}
+        {isInfoMatched && <InfoForm />}
 
-        {isPasswordMatched && <PasswordForm userInfo={info} onSubmit={handleComplete} />}
+        {isPasswordMatched && <PasswordForm />}
       </Flex>
     </Flex>
   );

diff --git a/src/page/signUp/info/component/PasswordForm/PasswordForm.tsx b/src/page/signUp/info/component/PasswordForm/PasswordForm.tsx
@@ -1,73 +1,37 @@
 import { formStyle } from '@/page/signUp/info/component/InfoForm/InfoForm.style';
+import { usePasswordForm } from '@/page/signUp/info/hook/common/usePasswordForm';
 
-import React, { HTMLAttributes } from 'react';
 import { useLocation } from 'react-router-dom';
 
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Input from '@/common/component/Input/Input';
-import { useInput } from '@/common/hook/useInput';
 
-import { UserInfo } from '@/shared/api/signup/info/type';
-import { PASSWORD_VALID_FORMAT, PLACEHOLDER, SUPPORTING_TEXT } from '@/shared/constant/form';
+import { PLACEHOLDER } from '@/shared/constant/form';
 
-interface PasswordFormProps extends Omit<HTMLAttributes<HTMLFormElement>, 'onSubmit'> {
-  onSubmit?: (info: UserInfo) => void;
-}
-
-const PasswordForm = ({ onSubmit }: PasswordFormProps) => {
+const PasswordForm = () => {
   const { state } = useLocation();
 
-  const { value: password, onChange: onPasswordChange, onValidate, error: passwordError } = useInput('');
-  const {
-    value: passwordChecker,
-    onChange: onPasswordCheckerChange,
-    onValidate: onCheckerValidate,
-    error: checkerError,
-  } = useInput('');
-
-  const formValidate = () => {
-    if (!onValidate(SUPPORTING_TEXT.PASSWORD) || !onCheckerValidate(SUPPORTING_TEXT.PASSWORD_CHECKER)) return false;
-
-    if (!onCheckerValidate(SUPPORTING_TEXT.PASSWORD_NO_EQUAL, password !== passwordChecker)) return false;
-
-    if (!onValidate(SUPPORTING_TEXT.PASSWORD_INVALID, !PASSWORD_VALID_FORMAT.test(password))) return false;
-
-    return true;
-  };
-
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-
-    if (!formValidate()) return;
-
-    const formData = {
-      ...state.formData,
-      password,
-      passwordChecker,
-    };
-
-    onSubmit?.(formData);
-  };
+  const { info, handleInfoChange, handleSubmit, error } = usePasswordForm(state);
 
   return (
     <form onSubmit={handleSubmit} css={formStyle}>
       <Flex styles={{ direction: 'column', width: '100%', gap: '1.2rem', grow: '1' }}>
         <Input
           type="password"
-          isError={Boolean(passwordError)}
-          value={password}
-          onChange={onPasswordChange}
+          isError={Boolean(error.password)}
+          value={info.password}
+          onChange={handleInfoChange('password')}
           variant="underline"
           label="비밀번호 설정"
           placeholder={PLACEHOLDER.PASSWORD}
         />
         <Input
           type="password"
-          isError={Boolean(checkerError || passwordError)}
-          supportingText={checkerError || passwordError}
-          value={passwordChecker}
-          onChange={onPasswordCheckerChange}
+          isError={Boolean(error.passwordChecker || error.password)}
+          supportingText={error.passwordChecker || error.password}
+          value={info.passwordChecker}
+          onChange={handleInfoChange('passwordChecker')}
           variant="underline"
           placeholder={PLACEHOLDER.PASSWORD_CONFIRM}
         />