From 673cd24ed0de32ddaba2c817910beecce044ae90 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 10:25:31 +0900
Subject: [PATCH 01/18] [feat] prevent copy and paste at input in LoginPage
 (/auth)

---
 src/components/common/InputField/InputField.tsx | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/common/InputField/InputField.tsx b/src/components/common/InputField/InputField.tsx
index 85cf3ff..cb67eae 100644
--- a/src/components/common/InputField/InputField.tsx
+++ b/src/components/common/InputField/InputField.tsx
@@ -1,4 +1,5 @@
 import {
+  ClipboardEvent,
   HTMLAttributes,
   HTMLInputTypeAttribute,
   InputHTMLAttributes,
@@ -44,6 +45,14 @@ const InputField = forwardRef(
     }: InputFieldProps,
     ref: Ref<HTMLInputElement>,
   ) => {
+    const preventCopy = (e: ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+    };
+
+    const preventPaste = (e: ClipboardEvent<HTMLInputElement>) => {
+      e.preventDefault();
+    };
+
     return (
       <div className={styles.container}>
         <label htmlFor={id} className={styles.label}>
@@ -61,6 +70,8 @@ const InputField = forwardRef(
           state={errorMessage ? 'fail' : 'normal'}
           variants={variants}
           postfix={inputPostFix}
+          onCopy={preventCopy}
+          onPaste={preventPaste}
           {...props}
         />
 

From a881d83856ebbda0720f31d1d40e262d2fe3f058 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 10:39:58 +0900
Subject: [PATCH 02/18] [feat] prevent moving to go to home when logo is
 clicked

---
 src/app/(AuthLayout)/auth/github/page.tsx  |  2 +-
 src/app/(AuthLayout)/auth/info/page.tsx    |  2 +-
 src/app/(AuthLayout)/auth/page.tsx         |  2 +-
 src/app/(AuthLayout)/auth/sign-up/page.tsx |  2 +-
 src/components/common/Logo/Logo.tsx        | 13 ++++++++++---
 5 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/github/page.tsx b/src/app/(AuthLayout)/auth/github/page.tsx
index f51226b..7375393 100644
--- a/src/app/(AuthLayout)/auth/github/page.tsx
+++ b/src/app/(AuthLayout)/auth/github/page.tsx
@@ -118,7 +118,7 @@ const GithubSignupPage = () => {
 
   return (
     <div className={styles.container}>
-      <Logo />
+      <Logo isGoHome={false} />
 
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <div>
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 057f7b0..1fe4b47 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -105,7 +105,7 @@ const AdditionalInfoPage = () => {
 
   return (
     <div className={styles.container}>
-      <Logo />
+      <Logo isGoHome={false} />
 
       <form onSubmit={handleSubmit(submitHandler)}>
         <FormProvider {...methods}>
diff --git a/src/app/(AuthLayout)/auth/page.tsx b/src/app/(AuthLayout)/auth/page.tsx
index d5a0526..6da1f2e 100644
--- a/src/app/(AuthLayout)/auth/page.tsx
+++ b/src/app/(AuthLayout)/auth/page.tsx
@@ -136,7 +136,7 @@ const LoginPage = () => {
     <div className={styles.container}>
       <div className={styles.inner_container}>
         <div style={{ marginBottom: 40 }}>
-          <Logo />
+          <Logo isGoHome={false} />
         </div>
 
         <LoginForm />
diff --git a/src/app/(AuthLayout)/auth/sign-up/page.tsx b/src/app/(AuthLayout)/auth/sign-up/page.tsx
index 2f844a3..9475a28 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.tsx
+++ b/src/app/(AuthLayout)/auth/sign-up/page.tsx
@@ -119,7 +119,7 @@ const SignupPage = () => {
   return (
     <div className={styles.container}>
       <div className={styles.logo_box}>
-        <Logo />
+        <Logo isGoHome={false} />
       </div>
 
       <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
diff --git a/src/components/common/Logo/Logo.tsx b/src/components/common/Logo/Logo.tsx
index 3c67056..1cf910c 100644
--- a/src/components/common/Logo/Logo.tsx
+++ b/src/components/common/Logo/Logo.tsx
@@ -7,18 +7,25 @@ import GitHubIcon from '@/assets/icons/github.svg';
 
 import styles from './Logo.module.scss';
 
-const Logo = () => {
+interface LogoProps {
+  isGoHome?: boolean;
+  href?: string;
+}
+
+const Logo = ({ isGoHome = true, href = '/' }: LogoProps) => {
   const pathname = usePathname();
 
+  const Wrapper = isGoHome ? Link : 'div';
+
   return (
-    <Link href="/" className={styles.link}>
+    <Wrapper href={isGoHome ? href : ''} className={styles.link}>
       <span className={styles.logo}>
         Prostargram
         {pathname === '/auth/github' && (
           <GitHubIcon className={styles.github} />
         )}
       </span>
-    </Link>
+    </Wrapper>
   );
 };
 

From b54742c8028620453c8cef3ae637447050635599 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 11:13:48 +0900
Subject: [PATCH 03/18] [feat] indicate required message after clicking submit
 with empty inputs in (/auth)

---
 src/app/(AuthLayout)/auth/page.tsx              | 6 +++---
 src/components/common/InputField/InputField.tsx | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/page.tsx b/src/app/(AuthLayout)/auth/page.tsx
index 6da1f2e..3ce983d 100644
--- a/src/app/(AuthLayout)/auth/page.tsx
+++ b/src/app/(AuthLayout)/auth/page.tsx
@@ -36,7 +36,7 @@ const LoginForm = () => {
     register,
     setError,
     handleSubmit,
-    formState: { errors, isDirty },
+    formState: { errors },
   } = useForm<IFormInput>({
     defaultValues: { email: '', password: '' },
     mode: 'onSubmit',
@@ -80,7 +80,7 @@ const LoginForm = () => {
           label="이메일"
           maxLength={30}
           placeholder="이메일을 입력해주세요."
-          errorMessage={isDirty ? errors.email?.message : undefined}
+          errorMessage={errors.email?.message}
           {...register('email', validator.email)}
         />
         <ToggleWrapper>
@@ -91,7 +91,7 @@ const LoginForm = () => {
               label="비밀번호"
               maxLength={20}
               placeholder="비밀번호를 입력해주세요."
-              errorMessage={isDirty ? errors.password?.message : undefined}
+              errorMessage={errors.password?.message}
               {...register('password', validator.password)}
               inputPostFix={
                 <button
diff --git a/src/components/common/InputField/InputField.tsx b/src/components/common/InputField/InputField.tsx
index cb67eae..21ec2c2 100644
--- a/src/components/common/InputField/InputField.tsx
+++ b/src/components/common/InputField/InputField.tsx
@@ -64,8 +64,8 @@ const InputField = forwardRef(
           id={id}
           type={type}
           name={name}
-          placeholder={placeholder}
           ref={ref}
+          placeholder={placeholder}
           size={size}
           state={errorMessage ? 'fail' : 'normal'}
           variants={variants}

From 26846af3e732a84e4233875c387ded4838835b1e Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 11:27:02 +0900
Subject: [PATCH 04/18] [feat] update regexp for password

---
 src/constants/regExp.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/constants/regExp.ts b/src/constants/regExp.ts
index ea0f8c7..158ade1 100644
--- a/src/constants/regExp.ts
+++ b/src/constants/regExp.ts
@@ -2,7 +2,7 @@ const REG_EXP = {
   EMAIL:
     /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i,
   PASSWORD:
-    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@$!%*?&.,])[A-Za-z\d$@$!%*?&.,]/,
+    /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[#$@!%*?&.,])[A-Za-z\d#$@!%*?&.,]{8,20}$/,
   NICKNAME: /^[a-z0-9가-힣_.]{2,16}$/,
   ONLY_ENG_NUM: /^[a-zA-Z0-9]*$/,
 };

From dc261a9648c5dbda6e9b2cf72477731cc0a35b24 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 13:11:59 +0900
Subject: [PATCH 05/18] [feat] remove auto-complete style and add logic to
 execute with enter key

---
 src/app/(AuthLayout)/auth/sign-up/page.tsx    | 63 ++++++++++++++-----
 src/components/common/Input/Input.module.scss | 12 +++-
 src/hooks/useSignUpMutation.ts                |  4 +-
 3 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/sign-up/page.tsx b/src/app/(AuthLayout)/auth/sign-up/page.tsx
index 9475a28..e9e31ca 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.tsx
+++ b/src/app/(AuthLayout)/auth/sign-up/page.tsx
@@ -69,12 +69,53 @@ const SignupPage = () => {
     changeUsernameState,
   });
 
+  const isReadyToMoveNextStep =
+    !isEmailConfirmed ||
+    !isUsernameConfirmed ||
+    !isValid ||
+    isRequestSignupPending;
+
   const preventEnter = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault();
     }
   };
 
+  const sendEmailWithCode = () => {
+    requestCodeByEmail(watch('email'));
+  };
+
+  const keydownHandlerToSendEmail = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      sendEmailWithCode();
+    }
+  };
+
+  const requestToConfirmWithCode = () => {
+    requestConfirmCode({
+      email: watch('email'),
+      code: watch('confirm'),
+    });
+  };
+
+  const keydownHandlerToConfirmCode = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      requestToConfirmWithCode();
+    }
+  };
+
+  const requestToCheckIsDuplicateUsername = () => {
+    requestCheckDuplicateUsername(watch('username'));
+  };
+
+  const keydownHandlerToCheckIsDuplicateUsername = (
+    e: KeyboardEvent<HTMLInputElement>,
+  ) => {
+    if (e.key === 'Enter') {
+      requestToCheckIsDuplicateUsername();
+    }
+  };
+
   const resetEmail = () => {
     resetField('email');
     resetField('confirm');
@@ -136,7 +177,7 @@ const SignupPage = () => {
               placeholder="이메일을 입력해주세요."
               maxLength={30}
               disabled={!isEmailPending}
-              onKeyDown={preventEnter}
+              onKeyDown={keydownHandlerToSendEmail}
               state={(errors.email?.message && 'fail') || 'normal'}
               {...register('email', validators.email)}
             />
@@ -144,7 +185,7 @@ const SignupPage = () => {
               <Button
                 type="button"
                 className={styles.button}
-                onClick={() => requestCodeByEmail(watch('email'))}
+                onClick={sendEmailWithCode}
                 disabled={
                   !watch('email').length ||
                   !!errors.email?.message ||
@@ -193,18 +234,13 @@ const SignupPage = () => {
                 maxLength={7}
                 disabled={isEmailConfirmed}
                 state={(errors.confirm?.message && 'fail') || 'normal'}
-                onKeyDown={preventEnter}
+                onKeyDown={keydownHandlerToConfirmCode}
                 {...register('confirm', validators.confirm)}
               />
               <Button
                 type="button"
                 className={styles.button}
-                onClick={() =>
-                  requestConfirmCode({
-                    email: watch('email'),
-                    code: watch('confirm'),
-                  })
-                }
+                onClick={requestToConfirmWithCode}
                 disabled={
                   isRequestConfirmPending || isEmailRetry || isEmailConfirmed
                 }
@@ -272,13 +308,13 @@ const SignupPage = () => {
               maxLength={16}
               state={errors.username?.message ? 'fail' : 'normal'}
               disabled={isUsernameConfirmed}
-              onKeyDown={preventEnter}
+              onKeyDown={keydownHandlerToCheckIsDuplicateUsername}
               {...register('username', validators.username)}
             />
             <Button
               type="button"
               className={styles.button}
-              onClick={() => requestCheckDuplicateUsername(watch('username'))}
+              onClick={requestToCheckIsDuplicateUsername}
               disabled={
                 !watch('username')?.length ||
                 isDuplicateUsernamePending ||
@@ -291,10 +327,7 @@ const SignupPage = () => {
           </Field.Box>
           <Field.ErrorMessage>{errors.username?.message}</Field.ErrorMessage>
         </Field>
-        <Button
-          className={styles.next_button}
-          disabled={!isValid || isRequestSignupPending}
-        >
+        <Button className={styles.next_button} disabled={isReadyToMoveNextStep}>
           {isRequestSignupPending ? '...' : '다음 단계로'}
         </Button>
       </form>
diff --git a/src/components/common/Input/Input.module.scss b/src/components/common/Input/Input.module.scss
index 4fbe704..5677658 100644
--- a/src/components/common/Input/Input.module.scss
+++ b/src/components/common/Input/Input.module.scss
@@ -57,13 +57,19 @@
   font-size: $FONT_SIZE_14;
 
   &::placeholder {
-    font-size: 12;
+    font-size: $FONT_SIZE_12;
   }
 
   &:disabled {
     color: $COLOR_GRAY_3;
   }
 
+  &:-webkit-autofill {
+    height: fit-content;
+    -webkit-box-shadow: 0 0 0 500px $COLOR_GRAY_9 inset !important;
+    font-size: $FONT_SIZE_12;
+  }
+
   @include res--desktop {
     height: 48px;
     font-size: $FONT_SIZE_16;
@@ -71,5 +77,9 @@
     &::placeholder {
       font-size: $FONT_SIZE_16;
     }
+
+    &:-webkit-autofill {
+      font-size: $FONT_SIZE_16;
+    }
   }
 }
diff --git a/src/hooks/useSignUpMutation.ts b/src/hooks/useSignUpMutation.ts
index 5e74a41..d5ef399 100644
--- a/src/hooks/useSignUpMutation.ts
+++ b/src/hooks/useSignUpMutation.ts
@@ -76,10 +76,10 @@ const useSignupMutation = ({
       changeUsernameState(CONFIRM_STATES.CONFIRM);
       clearErrors('username');
     },
-    onError: (data) => {
+    onError: (err) => {
       setError('username', {
         type: 'validate',
-        message: data.message,
+        message: err.message,
       });
     },
   });

From 81d09c75ce7e2ab4fcb443cc11bc0782a1750fce Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Thu, 30 Jan 2025 13:26:32 +0900
Subject: [PATCH 06/18] [feat] after sending email, reset button is rendered
 with timer concurrently

---
 .../auth/sign-up/page.module.scss             |  2 +-
 src/app/(AuthLayout)/auth/sign-up/page.tsx    | 37 +++++++++++--------
 2 files changed, 23 insertions(+), 16 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/sign-up/page.module.scss b/src/app/(AuthLayout)/auth/sign-up/page.module.scss
index 54c5219..5061176 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.module.scss
+++ b/src/app/(AuthLayout)/auth/sign-up/page.module.scss
@@ -38,7 +38,7 @@
   .button {
     @include res--desktop {
       flex: 1;
-      min-width: 100px;
+      min-width: 5rem;
     }
   }
 
diff --git a/src/app/(AuthLayout)/auth/sign-up/page.tsx b/src/app/(AuthLayout)/auth/sign-up/page.tsx
index e9e31ca..fd56084 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.tsx
+++ b/src/app/(AuthLayout)/auth/sign-up/page.tsx
@@ -69,6 +69,14 @@ const SignupPage = () => {
     changeUsernameState,
   });
 
+  const [email, confirmCode, password, repassword, username] = watch([
+    'email',
+    'confirm',
+    'password',
+    'repassword',
+    'username',
+  ]);
+
   const isReadyToMoveNextStep =
     !isEmailConfirmed ||
     !isUsernameConfirmed ||
@@ -82,7 +90,7 @@ const SignupPage = () => {
   };
 
   const sendEmailWithCode = () => {
-    requestCodeByEmail(watch('email'));
+    requestCodeByEmail(email);
   };
 
   const keydownHandlerToSendEmail = (e: KeyboardEvent<HTMLInputElement>) => {
@@ -93,8 +101,8 @@ const SignupPage = () => {
 
   const requestToConfirmWithCode = () => {
     requestConfirmCode({
-      email: watch('email'),
-      code: watch('confirm'),
+      email,
+      code: confirmCode,
     });
   };
 
@@ -105,7 +113,7 @@ const SignupPage = () => {
   };
 
   const requestToCheckIsDuplicateUsername = () => {
-    requestCheckDuplicateUsername(watch('username'));
+    requestCheckDuplicateUsername(username);
   };
 
   const keydownHandlerToCheckIsDuplicateUsername = (
@@ -123,19 +131,20 @@ const SignupPage = () => {
   };
 
   const onSubmit = (values: ISignUpFormValueType) => {
-    const { email, password, username } = values;
-
     const payload = {
-      email,
-      password,
-      username,
+      email: values.email,
+      password: values.password,
+      username: values.username,
       ...signupToken,
     };
 
     requestSignupUser(payload, {
       onSuccess: async (res) => {
         if (res.isSuccess) {
-          const authResults = await postLogin({ email, password });
+          const authResults = await postLogin({
+            email: values.email,
+            password: values.password,
+          });
           const { result, isSuccess } = authResults;
 
           if (isSuccess && result) {
@@ -149,8 +158,6 @@ const SignupPage = () => {
     });
   };
 
-  const [password, repassword] = watch(['password', 'repassword']);
-
   useEffect(() => {
     if (password !== '' && password === repassword) {
       clearErrors(['password', 'repassword']);
@@ -187,7 +194,7 @@ const SignupPage = () => {
                 className={styles.button}
                 onClick={sendEmailWithCode}
                 disabled={
-                  !watch('email').length ||
+                  !email.length ||
                   !!errors.email?.message ||
                   isRequestEmailPending
                 }
@@ -207,7 +214,7 @@ const SignupPage = () => {
                 disabled={isRequestEmailPending || !isEmailRetry}
               />
             )}
-            {isEmailConfirmed && (
+            {(isEmailRequest || isEmailConfirmed) && (
               <Button
                 type="button"
                 className={styles.button}
@@ -316,7 +323,7 @@ const SignupPage = () => {
               className={styles.button}
               onClick={requestToCheckIsDuplicateUsername}
               disabled={
-                !watch('username')?.length ||
+                !username?.length ||
                 isDuplicateUsernamePending ||
                 !!errors.username?.message ||
                 isUsernameConfirmed

From afb26b9a498225284fbb94b45f0b66ea6cbec68c Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Tue, 4 Feb 2025 14:32:46 +0900
Subject: [PATCH 07/18] [fix] change invalid input message when user submitted
 inexistent id and password

---
 src/app/(AuthLayout)/auth/page.tsx | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/page.tsx b/src/app/(AuthLayout)/auth/page.tsx
index 3ce983d..a04cb7b 100644
--- a/src/app/(AuthLayout)/auth/page.tsx
+++ b/src/app/(AuthLayout)/auth/page.tsx
@@ -59,10 +59,14 @@ const LoginForm = () => {
         });
       }
     },
-    onError: () => {
+    onError: (err) => {
       setError('email', {
         type: 'deps',
-        message: '알 수 없는 에러가 발생했습니다. 다시 로그인 해 주세요.',
+        message: err.message,
+      });
+      setError('password', {
+        type: 'deps',
+        message: err.message,
       });
     },
   });

From 78befd3348ad238f87009450e0b03cb20706571c Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Tue, 4 Feb 2025 16:13:44 +0900
Subject: [PATCH 08/18] [refact] refactoring signup page - state name change
 "changeConfirmState" -> "changeConfirmCodeState" - add SignupField Component
 and apply it - props name change "changeState" -> "expireTimeEvent" in
 Field.TimerButton Component

---
 src/app/(AuthLayout)/auth/github/page.tsx     |   8 +-
 .../auth/sign-up/components/SignupField.tsx   |  34 ++
 src/app/(AuthLayout)/auth/sign-up/page.tsx    | 377 +++++++++---------
 src/components/common/Field/Field.tsx         |  41 +-
 src/hooks/useSignUpMutation.ts                |  10 +-
 src/hooks/useSignUpState.ts                   |   4 +-
 6 files changed, 245 insertions(+), 229 deletions(-)
 create mode 100644 src/app/(AuthLayout)/auth/sign-up/components/SignupField.tsx

diff --git a/src/app/(AuthLayout)/auth/github/page.tsx b/src/app/(AuthLayout)/auth/github/page.tsx
index 7375393..fe59048 100644
--- a/src/app/(AuthLayout)/auth/github/page.tsx
+++ b/src/app/(AuthLayout)/auth/github/page.tsx
@@ -48,7 +48,7 @@ const GithubSignupPage = () => {
     isEmailRequest,
     isEmailRetry,
     isUsernameConfirmed,
-    changeConfirmState,
+    changeConfirmCodeState,
     changeUsernameState,
     changeSignupToken,
   } = useSignUpState();
@@ -65,7 +65,7 @@ const GithubSignupPage = () => {
   } = useSignupMutation({
     formMethods,
     changeSignupToken,
-    changeConfirmState,
+    changeConfirmCodeState,
     changeUsernameState,
   });
 
@@ -78,7 +78,7 @@ const GithubSignupPage = () => {
   const resetEmail = () => {
     resetField('email');
     resetField('confirm');
-    changeConfirmState(CONFIRM_STATES.PENDING);
+    changeConfirmCodeState(CONFIRM_STATES.PENDING);
   };
 
   const onSubmit = (values: ISignUpFormValueType) => {
@@ -159,7 +159,7 @@ const GithubSignupPage = () => {
                 <Field.TimerButton
                   type="button"
                   className={styles.button}
-                  changeState={() => changeConfirmState('retry')}
+                  expireTimeEvent={() => changeConfirmCodeState('retry')}
                   isConfirm={isEmailConfirmed}
                   timerDuration={300_000} // 5분
                   disabled={isRequestEmailPending || !isEmailRetry}
diff --git a/src/app/(AuthLayout)/auth/sign-up/components/SignupField.tsx b/src/app/(AuthLayout)/auth/sign-up/components/SignupField.tsx
new file mode 100644
index 0000000..7366525
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/sign-up/components/SignupField.tsx
@@ -0,0 +1,34 @@
+import { ReactNode } from 'react';
+
+import Field from '@/components/common/Field';
+
+interface SignupFieldProps {
+  htmlFor: string;
+  label: string;
+  emphasizeString?: string;
+  content: ReactNode;
+  errorMessage?: string;
+}
+
+const SignupField = ({
+  htmlFor,
+  label,
+  emphasizeString,
+  content,
+  errorMessage,
+}: SignupFieldProps) => {
+  return (
+    <Field>
+      <Field.Label htmlFor={htmlFor}>
+        {emphasizeString && (
+          <Field.Emphasize>{emphasizeString}</Field.Emphasize>
+        )}
+        {label}
+      </Field.Label>
+      <Field.Box>{content}</Field.Box>
+      {errorMessage && <Field.ErrorMessage>{errorMessage}</Field.ErrorMessage>}
+    </Field>
+  );
+};
+
+export default SignupField;
diff --git a/src/app/(AuthLayout)/auth/sign-up/page.tsx b/src/app/(AuthLayout)/auth/sign-up/page.tsx
index fd56084..360e2bc 100644
--- a/src/app/(AuthLayout)/auth/sign-up/page.tsx
+++ b/src/app/(AuthLayout)/auth/sign-up/page.tsx
@@ -18,6 +18,7 @@ import { postLogin } from '@/api/auth';
 import { saveAccessToken, saveRefreshToken } from '@/utils/manageToken';
 
 import styles from './page.module.scss';
+import SignupField from './components/SignupField';
 
 const SignupPage = () => {
   const router = useRouter();
@@ -48,7 +49,7 @@ const SignupPage = () => {
     isEmailRequest,
     isEmailRetry,
     isUsernameConfirmed,
-    changeConfirmState,
+    changeConfirmCodeState,
     changeUsernameState,
     changeSignupToken,
   } = useSignUpState();
@@ -65,7 +66,7 @@ const SignupPage = () => {
   } = useSignupMutation({
     formMethods,
     changeSignupToken,
-    changeConfirmState,
+    changeConfirmCodeState,
     changeUsernameState,
   });
 
@@ -77,75 +78,45 @@ const SignupPage = () => {
     'username',
   ]);
 
-  const isReadyToMoveNextStep =
+  const disableButtonForEmailAuthentication =
+    !email.length || !!errors.email?.message || isRequestEmailPending;
+
+  const isDisableNextStepButton =
     !isEmailConfirmed ||
     !isUsernameConfirmed ||
     !isValid ||
     isRequestSignupPending;
 
-  const preventEnter = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-    }
-  };
-
-  const sendEmailWithCode = () => {
-    requestCodeByEmail(email);
-  };
-
-  const keydownHandlerToSendEmail = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      sendEmailWithCode();
-    }
-  };
-
-  const requestToConfirmWithCode = () => {
-    requestConfirmCode({
-      email,
-      code: confirmCode,
-    });
-  };
-
-  const keydownHandlerToConfirmCode = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      requestToConfirmWithCode();
-    }
-  };
-
-  const requestToCheckIsDuplicateUsername = () => {
-    requestCheckDuplicateUsername(username);
-  };
-
-  const keydownHandlerToCheckIsDuplicateUsername = (
-    e: KeyboardEvent<HTMLInputElement>,
-  ) => {
-    if (e.key === 'Enter') {
-      requestToCheckIsDuplicateUsername();
-    }
-  };
+  const handleKeyDown =
+    (callback: () => void) => (e: KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        e.preventDefault();
+        callback();
+      }
+    };
 
   const resetEmail = () => {
     resetField('email');
     resetField('confirm');
-    changeConfirmState(CONFIRM_STATES.PENDING);
+    changeConfirmCodeState(CONFIRM_STATES.PENDING);
   };
 
   const onSubmit = (values: ISignUpFormValueType) => {
-    const payload = {
+    const loginInfo = {
       email: values.email,
       password: values.password,
+    };
+
+    const payload = {
       username: values.username,
+      ...loginInfo,
       ...signupToken,
     };
 
     requestSignupUser(payload, {
       onSuccess: async (res) => {
         if (res.isSuccess) {
-          const authResults = await postLogin({
-            email: values.email,
-            password: values.password,
-          });
-          const { result, isSuccess } = authResults;
+          const { isSuccess, result } = await postLogin(loginInfo);
 
           if (isSuccess && result) {
             const { accessToken, refreshToken } = result;
@@ -159,10 +130,20 @@ const SignupPage = () => {
   };
 
   useEffect(() => {
-    if (password !== '' && password === repassword) {
+    if (
+      password !== '' &&
+      (!errors.password?.message || !errors.repassword?.message) &&
+      password === repassword
+    ) {
       clearErrors(['password', 'repassword']);
     }
-  }, [password, repassword, clearErrors]);
+  }, [
+    password,
+    repassword,
+    errors.password?.message,
+    errors.repassword?.message,
+    clearErrors,
+  ]);
 
   return (
     <div className={styles.container}>
@@ -172,101 +153,112 @@ const SignupPage = () => {
 
       <form className={styles.form} onSubmit={handleSubmit(onSubmit)}>
         <p className={styles.sub_title}>회원가입</p>
-        <Field>
-          <Field.Label htmlFor="email">
-            <Field.Emphasize>*</Field.Emphasize>
-            이메일
-          </Field.Label>
-          <Field.Box>
-            <Input
-              id="email"
-              type="text"
-              placeholder="이메일을 입력해주세요."
-              maxLength={30}
-              disabled={!isEmailPending}
-              onKeyDown={keydownHandlerToSendEmail}
-              state={(errors.email?.message && 'fail') || 'normal'}
-              {...register('email', validators.email)}
-            />
-            {(isEmailPending || isEmailRetry) && (
-              <Button
-                type="button"
-                className={styles.button}
-                onClick={sendEmailWithCode}
-                disabled={
-                  !email.length ||
-                  !!errors.email?.message ||
-                  isRequestEmailPending
-                }
-              >
-                {isEmailPending && !isRequestEmailPending && '인증 요청'}
-                {isEmailRetry && !isRequestEmailPending && '재요청'}
-                {isRequestEmailPending && '요청 중...'}
-              </Button>
-            )}
-            {isEmailRequest && (
-              <Field.TimerButton
-                type="button"
-                className={styles.button}
-                changeState={() => changeConfirmState('retry')}
-                isConfirm={isEmailConfirmed}
-                timerDuration={300_000} // 5분
-                disabled={isRequestEmailPending || !isEmailRetry}
-              />
-            )}
-            {(isEmailRequest || isEmailConfirmed) && (
-              <Button
-                type="button"
-                className={styles.button}
-                onClick={resetEmail}
-              >
-                재설정
-              </Button>
-            )}
-          </Field.Box>
-          <Field.ErrorMessage>{errors.email?.message}</Field.ErrorMessage>
-        </Field>
-
-        {!isEmailPending && (
-          <Field>
-            <Field.Label htmlFor="confirm">
-              <Field.Emphasize>*</Field.Emphasize>
-              인증번호
-            </Field.Label>
-            <Field.Box>
+        <SignupField
+          label="이메일"
+          htmlFor="email"
+          emphasizeString="*"
+          errorMessage={errors.email?.message}
+          content={
+            <>
               <Input
-                id="confirm"
+                id="email"
                 type="text"
-                placeholder="인증번호를 입력해주세요."
-                maxLength={7}
-                disabled={isEmailConfirmed}
-                state={(errors.confirm?.message && 'fail') || 'normal'}
-                onKeyDown={keydownHandlerToConfirmCode}
-                {...register('confirm', validators.confirm)}
+                placeholder="이메일을 입력해주세요."
+                maxLength={30}
+                disabled={!isEmailPending || isRequestEmailPending}
+                onKeyDown={handleKeyDown(
+                  () =>
+                    !disableButtonForEmailAuthentication &&
+                    requestCodeByEmail(email),
+                )}
+                state={(errors.email?.message && 'fail') || 'normal'}
+                {...register('email', validators.email)}
               />
-              <Button
-                type="button"
-                className={styles.button}
-                onClick={requestToConfirmWithCode}
-                disabled={
-                  isRequestConfirmPending || isEmailRetry || isEmailConfirmed
-                }
-              >
-                {!isRequestConfirmPending && !isEmailConfirmed && '인증 확인'}
-                {isEmailConfirmed && '인증 완료'}
-                {isRequestConfirmPending && '인증 중...'}
-              </Button>
-            </Field.Box>
-            <Field.ErrorMessage>{errors.confirm?.message}</Field.ErrorMessage>
-          </Field>
+              {(isEmailPending || isEmailRetry) && (
+                <Button
+                  type="button"
+                  className={styles.button}
+                  onClick={() => requestCodeByEmail(email)}
+                  disabled={disableButtonForEmailAuthentication}
+                >
+                  {isEmailPending && !isRequestEmailPending && '인증 요청'}
+                  {isEmailRetry && !isRequestEmailPending && '재요청'}
+                  {isRequestEmailPending && '요청 중...'}
+                </Button>
+              )}
+              {isEmailRequest && (
+                <Field.TimerButton
+                  type="button"
+                  className={styles.button}
+                  isConfirm={isEmailConfirmed}
+                  timerDuration={300_000} // 5분
+                  expireTimeEvent={() => changeConfirmCodeState('retry')}
+                  disabled={isRequestEmailPending || !isEmailRetry}
+                />
+              )}
+              {!isEmailPending && (
+                <Button
+                  type="button"
+                  className={styles.button}
+                  onClick={resetEmail}
+                >
+                  재설정
+                </Button>
+              )}
+            </>
+          }
+        />
+
+        {!isEmailPending && (
+          <SignupField
+            label="인증번호"
+            htmlFor="confirm"
+            emphasizeString="*"
+            errorMessage={errors.confirm?.message}
+            content={
+              <>
+                <Input
+                  id="confirm"
+                  type="text"
+                  placeholder="인증번호를 입력해주세요."
+                  maxLength={7}
+                  disabled={isEmailConfirmed}
+                  state={(errors.confirm?.message && 'fail') || 'normal'}
+                  onKeyDown={handleKeyDown(
+                    () =>
+                      confirmCode.length === 7 &&
+                      requestConfirmCode({ email, code: confirmCode }),
+                  )}
+                  {...register('confirm', validators.confirm)}
+                />
+                <Button
+                  type="button"
+                  className={styles.button}
+                  onClick={() =>
+                    requestConfirmCode({ email, code: confirmCode })
+                  }
+                  disabled={
+                    confirmCode.length < 7 ||
+                    isRequestConfirmPending ||
+                    isEmailRetry ||
+                    isEmailConfirmed
+                  }
+                >
+                  {!isRequestConfirmPending && !isEmailConfirmed && '인증 확인'}
+                  {isEmailConfirmed && '인증 완료'}
+                  {isRequestConfirmPending && '인증 중...'}
+                </Button>
+              </>
+            }
+          />
         )}
 
-        <Field>
-          <Field.Label htmlFor="password">
-            <Field.Emphasize>*</Field.Emphasize>
-            비밀번호
-          </Field.Label>
-          <Field.Box>
+        <SignupField
+          label="비밀번호"
+          htmlFor="password"
+          emphasizeString="*"
+          errorMessage={errors.password?.message}
+          content={
             <Input
               id="password"
               type="password"
@@ -274,19 +266,18 @@ const SignupPage = () => {
               minLength={8}
               maxLength={20}
               state={errors.password?.message ? 'fail' : 'normal'}
-              onKeyDown={preventEnter}
+              onKeyDown={handleKeyDown(() => {})}
               {...register('password', validators.password)}
             />
-          </Field.Box>
-          <Field.ErrorMessage>{errors.password?.message}</Field.ErrorMessage>
-        </Field>
+          }
+        />
 
-        <Field>
-          <Field.Label htmlFor="repassword">
-            <Field.Emphasize>*</Field.Emphasize>
-            비밀번호 확인
-          </Field.Label>
-          <Field.Box>
+        <SignupField
+          label="비밀번호 확인"
+          htmlFor="repassword"
+          emphasizeString="*"
+          errorMessage={errors.repassword?.message}
+          content={
             <Input
               id="repassword"
               type="password"
@@ -294,47 +285,53 @@ const SignupPage = () => {
               minLength={8}
               maxLength={20}
               state={errors.repassword?.message ? 'fail' : 'normal'}
-              onKeyDown={preventEnter}
+              onKeyDown={handleKeyDown(() => {})}
               {...register('repassword', validators.repassword)}
             />
-          </Field.Box>
-          <Field.ErrorMessage>{errors.repassword?.message}</Field.ErrorMessage>
-        </Field>
+          }
+        />
 
-        <Field>
-          <Field.Label htmlFor="username">
-            <Field.Emphasize>*</Field.Emphasize>
-            닉네임
-          </Field.Label>
-          <Field.Box>
-            <Input
-              id="username"
-              type="text"
-              placeholder="닉네임을 입력해주세요."
-              minLength={2}
-              maxLength={16}
-              state={errors.username?.message ? 'fail' : 'normal'}
-              disabled={isUsernameConfirmed}
-              onKeyDown={keydownHandlerToCheckIsDuplicateUsername}
-              {...register('username', validators.username)}
-            />
-            <Button
-              type="button"
-              className={styles.button}
-              onClick={requestToCheckIsDuplicateUsername}
-              disabled={
-                !username?.length ||
-                isDuplicateUsernamePending ||
-                !!errors.username?.message ||
-                isUsernameConfirmed
-              }
-            >
-              {isDuplicateUsernamePending ? '확인 중...' : '중복 확인'}
-            </Button>
-          </Field.Box>
-          <Field.ErrorMessage>{errors.username?.message}</Field.ErrorMessage>
-        </Field>
-        <Button className={styles.next_button} disabled={isReadyToMoveNextStep}>
+        <SignupField
+          label="닉네임"
+          htmlFor="username"
+          emphasizeString="*"
+          errorMessage={errors.username?.message}
+          content={
+            <>
+              <Input
+                id="username"
+                type="text"
+                placeholder="닉네임을 입력해주세요."
+                minLength={2}
+                maxLength={16}
+                state={errors.username?.message ? 'fail' : 'normal'}
+                disabled={isUsernameConfirmed}
+                onKeyDown={handleKeyDown(() =>
+                  requestCheckDuplicateUsername(username),
+                )}
+                {...register('username', validators.username)}
+              />
+              <Button
+                type="button"
+                className={styles.button}
+                onClick={() => requestCheckDuplicateUsername(username)}
+                disabled={
+                  !username?.length ||
+                  isDuplicateUsernamePending ||
+                  !!errors.username?.message ||
+                  isUsernameConfirmed
+                }
+              >
+                {isDuplicateUsernamePending ? '확인 중...' : '중복 확인'}
+              </Button>
+            </>
+          }
+        />
+
+        <Button
+          className={styles.next_button}
+          disabled={isDisableNextStepButton}
+        >
           {isRequestSignupPending ? '...' : '다음 단계로'}
         </Button>
       </form>
diff --git a/src/components/common/Field/Field.tsx b/src/components/common/Field/Field.tsx
index 2bccef6..d3bdd4b 100644
--- a/src/components/common/Field/Field.tsx
+++ b/src/components/common/Field/Field.tsx
@@ -65,51 +65,36 @@ interface TimerButtonProps
   extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
   isConfirm?: boolean;
   timerDuration: number;
-  onClick?: () => void;
-  changeState: () => void;
+  expireTimeEvent: () => void;
 }
 
 const TimerButton = ({
   isConfirm,
   timerDuration,
-  onClick,
-  changeState,
+  expireTimeEvent,
   ...props
 }: TimerButtonProps) => {
-  const { time, startTimer, changeTime, clearTimer } = useTimer({
+  const { time, startTimer, clearTimer } = useTimer({
     waitTime: timerDuration,
   });
 
-  const clickHandler = () => {
-    if (onClick) {
-      onClick();
-    }
-    changeTime(timerDuration);
-    startTimer();
-  };
-
   useEffect(() => {
-    if (time <= 0) return;
-    startTimer();
-  }, [time, startTimer]);
-
-  useEffect(() => {
-    if (time > 0) return;
+    if (isConfirm) {
+      clearTimer();
+    }
 
-    changeState();
-    clearTimer();
-  }, [time, changeState, clearTimer]);
+    if (time > 0) {
+      startTimer();
+    }
 
-  useEffect(() => {
-    if (isConfirm) {
+    if (time <= 0) {
+      expireTimeEvent();
       clearTimer();
     }
-  }, [isConfirm, clearTimer]);
+  }, [time, isConfirm, expireTimeEvent, startTimer, clearTimer]);
 
   return (
-    <Button onClick={clickHandler} {...props}>
-      {time <= 0 ? '재요청' : timeFormatter(time)}
-    </Button>
+    <Button {...props}>{time <= 0 ? '재요청' : timeFormatter(time)}</Button>
   );
 };
 
diff --git a/src/hooks/useSignUpMutation.ts b/src/hooks/useSignUpMutation.ts
index d5ef399..7ebbccc 100644
--- a/src/hooks/useSignUpMutation.ts
+++ b/src/hooks/useSignUpMutation.ts
@@ -16,7 +16,7 @@ import {
 
 interface UseSignupMutationParamType {
   formMethods: UseFormReturn<ISignUpFormValueType>;
-  changeConfirmState: (state: ConfirmStateType) => void;
+  changeConfirmCodeState: (state: ConfirmStateType) => void;
   changeUsernameState: (state: ConfirmStateType) => void;
   changeSignupToken: (token: {
     tokenName: keyof SignUpTokenType;
@@ -26,7 +26,7 @@ interface UseSignupMutationParamType {
 
 const useSignupMutation = ({
   formMethods,
-  changeConfirmState,
+  changeConfirmCodeState,
   changeUsernameState,
   changeSignupToken,
 }: UseSignupMutationParamType) => {
@@ -35,7 +35,7 @@ const useSignupMutation = ({
   const { isPending: isRequestEmailPending, mutate: requestCodeByEmail } =
     useSelfSignUpMutation({
       onSuccess: () => {
-        changeConfirmState(CONFIRM_STATES.REQUEST);
+        changeConfirmCodeState(CONFIRM_STATES.REQUEST);
         clearErrors('email');
       },
       onError: (data) => {
@@ -53,7 +53,7 @@ const useSignupMutation = ({
           tokenName: 'emailToken',
           token: res.result!.emailToken,
         });
-        changeConfirmState(CONFIRM_STATES.CONFIRM);
+        changeConfirmCodeState(CONFIRM_STATES.CONFIRM);
         clearErrors(['email', 'confirm']);
       },
       onError: (data) => {
@@ -94,7 +94,7 @@ const useSignupMutation = ({
           err.message.includes('이메일 인증')
         ) {
           setError('email', { type: 'validate', message: err.message });
-          changeConfirmState('pending');
+          changeConfirmCodeState('pending');
           resetField('confirm');
         }
         if (err.message.includes('크기가 8에서')) {
diff --git a/src/hooks/useSignUpState.ts b/src/hooks/useSignUpState.ts
index 59c6ec9..6123b76 100644
--- a/src/hooks/useSignUpState.ts
+++ b/src/hooks/useSignUpState.ts
@@ -35,7 +35,7 @@ const useSignUpState = () => {
     CONFIRM_STATES.PENDING,
   );
 
-  const changeConfirmState = (state: ConfirmStateType) =>
+  const changeConfirmCodeState = (state: ConfirmStateType) =>
     setConfirmState(state);
 
   const changeUsernameState = (state: ConfirmStateType) =>
@@ -65,7 +65,7 @@ const useSignUpState = () => {
     isEmailRequest,
     isEmailRetry,
     isUsernameConfirmed,
-    changeConfirmState,
+    changeConfirmCodeState,
     changeUsernameState,
     changeSignupToken,
   };

From 3f8bec6bb1a9ff020f4f6c4c803dad3ebb2d5cd3 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Wed, 5 Feb 2025 15:34:09 +0900
Subject: [PATCH 09/18] [style] move AuthLayout position to center direction

---
 src/app/(AuthLayout)/layout.module.scss |  9 +++++++--
 src/app/(AuthLayout)/layout.tsx         |  8 ++++----
 src/app/auth/layout.tsx                 | 26 -------------------------
 3 files changed, 11 insertions(+), 32 deletions(-)
 delete mode 100644 src/app/auth/layout.tsx

diff --git a/src/app/(AuthLayout)/layout.module.scss b/src/app/(AuthLayout)/layout.module.scss
index ee8aad9..c5c2b48 100644
--- a/src/app/(AuthLayout)/layout.module.scss
+++ b/src/app/(AuthLayout)/layout.module.scss
@@ -6,11 +6,16 @@
 }
 
 .container {
+  position: relative;
+  top: 50px;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
   width: 100%;
 
-  @include flex-center;
   @include res--desktop {
-    height: 100%;
+    top: 100px;
+    height: 100vh;
     min-height: 46.875rem;
   }
 
diff --git a/src/app/(AuthLayout)/layout.tsx b/src/app/(AuthLayout)/layout.tsx
index 535a379..371a60f 100644
--- a/src/app/(AuthLayout)/layout.tsx
+++ b/src/app/(AuthLayout)/layout.tsx
@@ -11,8 +11,8 @@ interface AuthLayoutProps {
 
 const AuthLayout = ({ children }: AuthLayoutProps) => {
   return (
-    <div className={styles.container}>
-      <main className={styles.inner_container}>
+    <main className={styles.container}>
+      <div className={styles.inner_container}>
         <div className={styles.left_box}>{children}</div>
 
         <div className={styles.right_box}>
@@ -23,8 +23,8 @@ const AuthLayout = ({ children }: AuthLayoutProps) => {
             priority
           />
         </div>
-      </main>
-    </div>
+      </div>
+    </main>
   );
 };
 
diff --git a/src/app/auth/layout.tsx b/src/app/auth/layout.tsx
deleted file mode 100644
index 239b7d2..0000000
--- a/src/app/auth/layout.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import Image from 'next/image';
-import { ReactNode } from 'react';
-
-import GroupImg from '@/assets/img/group1.png';
-
-import styles from './layout.module.scss';
-
-interface AuthLayoutProps {
-  children?: ReactNode;
-}
-
-const AuthLayout = ({ children }: AuthLayoutProps) => {
-  return (
-    <div className={styles.container}>
-      <main className={styles.inner_container}>
-        <div className={styles.left_box}>{children}</div>
-
-        <div className={styles.right_box}>
-          <Image src={GroupImg} alt="group-image" priority />
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default AuthLayout;

From 0e4f98909496e9f3269310ea4fcc706c3a2b81f6 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Wed, 5 Feb 2025 16:14:46 +0900
Subject: [PATCH 10/18] [refact] remove unnecessary hook and reduce
 useSocialAccountServerRequest hook method name

---
 .../auth/info/hooks/useAdditionalInfoForm.ts    | 17 -----------------
 src/app/(AuthLayout)/auth/info/page.tsx         | 10 ++++------
 src/hooks/useSocialAccountsServerRequests.ts    |  4 ++--
 3 files changed, 6 insertions(+), 25 deletions(-)
 delete mode 100644 src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoForm.ts

diff --git a/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoForm.ts b/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoForm.ts
deleted file mode 100644
index b73c5c6..0000000
--- a/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoForm.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { DefaultValues, FieldValues, useForm } from 'react-hook-form';
-
-interface UseAdditionalInfoPageProps<T> {
-  defaultValues: DefaultValues<T>;
-}
-
-const useAdditionalInfoForm = <T extends FieldValues>({
-  defaultValues,
-}: UseAdditionalInfoPageProps<T>) => {
-  const methods = useForm<T>({
-    defaultValues,
-  });
-
-  return methods;
-};
-
-export default useAdditionalInfoForm;
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 1fe4b47..18cbc33 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -2,7 +2,7 @@
 
 import clsx from 'clsx';
 import { useRouter } from 'next/navigation';
-import { FormProvider, SubmitHandler } from 'react-hook-form';
+import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
 import { RECOMMANED_INTERESTS } from '@/data/mock';
 import Logo from '@/components/common/Logo';
@@ -18,7 +18,6 @@ import AdditionalLink from './components/AdditionalLink';
 import MyInterestField from './components/MyInterestField';
 import InterestCheckbox from './components/InterestCheckbox';
 import { IAddionalInfoType } from './types/AdditionalInfoTypes';
-import useAdditionalInfoForm from './hooks/useAdditionalInfoForm';
 import useAdditionalInfoFieldArray from './hooks/useAdditionalInfoFieldArray';
 
 import styles from './page.module.scss';
@@ -29,7 +28,7 @@ const MY_INTERESTS_FIELDS_LIMIT = 10;
 const AdditionalInfoPage = () => {
   const router = useRouter();
   const { addToast } = useToastContext();
-  const methods = useAdditionalInfoForm<IAddionalInfoType>({
+  const methods = useForm<IAddionalInfoType>({
     defaultValues: { links: [{ link: '' }], interests: [], myInterests: [] },
   });
 
@@ -60,8 +59,7 @@ const AdditionalInfoPage = () => {
     fieldLimit: MY_INTERESTS_FIELDS_LIMIT,
   });
 
-  const { requestSocialAccountSaveSocialAccounts } =
-    useSocialAccountsServerRequest();
+  const { requestSaveSocialAccounts } = useSocialAccountsServerRequest();
   const { requestSaveInterest } = useInterestsServerRequests();
 
   const submitHandler: SubmitHandler<IAddionalInfoType> = async (values) => {
@@ -80,7 +78,7 @@ const AdditionalInfoPage = () => {
     const wholeInterestName = [...myInterestsNames, ...interestNames];
 
     if (uniqueSocialAccounts.length) {
-      requestSocialAccountSaveSocialAccounts({
+      requestSaveSocialAccounts({
         targetSocialAccounts: uniqueSocialAccounts,
       });
     }
diff --git a/src/hooks/useSocialAccountsServerRequests.ts b/src/hooks/useSocialAccountsServerRequests.ts
index 23fc2f4..f01f78f 100644
--- a/src/hooks/useSocialAccountsServerRequests.ts
+++ b/src/hooks/useSocialAccountsServerRequests.ts
@@ -22,7 +22,7 @@ const useSocialAccountsServerRequest = () => {
   const { mutate: removeSocialAccount } = useRemoveSocialAccountMutation({});
   const { addToast } = useToastContext();
 
-  const requestSocialAccountSaveSocialAccounts = async ({
+  const requestSaveSocialAccounts = async ({
     targetSocialAccounts,
     onSuccess,
     onError,
@@ -68,7 +68,7 @@ const useSocialAccountsServerRequest = () => {
     }
   };
 
-  return { requestSocialAccountSaveSocialAccounts };
+  return { requestSaveSocialAccounts };
 };
 
 export default useSocialAccountsServerRequest;

From 9139bd788827f4377a372ffba94fe2081e2b4137 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Wed, 5 Feb 2025 16:45:19 +0900
Subject: [PATCH 11/18] [refact] change socialAccount with react-hook-form
 fieldArray API to use useState

---
 src/api/info.ts                               |  8 ++--
 src/api/mutations/info.ts                     | 12 +----
 .../AdditionalLink/AdditionalLink.tsx         | 11 ++---
 src/app/(AuthLayout)/auth/info/page.tsx       | 44 ++++++++++++-------
 src/hooks/useSocialAccountsServerRequests.ts  | 29 +++++-------
 5 files changed, 49 insertions(+), 55 deletions(-)

diff --git a/src/api/info.ts b/src/api/info.ts
index 4b52999..b91fed4 100644
--- a/src/api/info.ts
+++ b/src/api/info.ts
@@ -1,24 +1,24 @@
 import { authInstance } from './httpRequest';
 
-const postSocialAccount = async (account: { socialAccountUrl: string }) => {
+const postSocialAccount = async (socialAccount: string) => {
   const url = `/social-accounts`;
 
   const result = await authInstance({
     method: 'POST',
     url,
-    data: account,
+    data: socialAccount,
   });
 
   return result;
 };
 
-const removeSocialAccount = async (account: { socialAccountUrl: string }) => {
+const removeSocialAccount = async (socialAccount: string) => {
   const url = `/social-accounts`;
 
   const result = await authInstance({
     method: 'DELETE',
     url,
-    data: account,
+    data: socialAccount,
   });
 
   return result;
diff --git a/src/api/mutations/info.ts b/src/api/mutations/info.ts
index 29e8751..b05ceb5 100644
--- a/src/api/mutations/info.ts
+++ b/src/api/mutations/info.ts
@@ -8,11 +8,7 @@ import {
 } from '../info';
 
 const useAddSocialAccountMutation = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { socialAccountUrl: string }
-  >,
+  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
 ) => {
   return useMutation({
     mutationFn: postSocialAccount,
@@ -21,11 +17,7 @@ const useAddSocialAccountMutation = (
 };
 
 const useRemoveSocialAccountMutation = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { socialAccountUrl: string }
-  >,
+  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
 ) => {
   return useMutation({
     mutationFn: removeSocialAccount,
diff --git a/src/app/(AuthLayout)/auth/info/components/AdditionalLink/AdditionalLink.tsx b/src/app/(AuthLayout)/auth/info/components/AdditionalLink/AdditionalLink.tsx
index e2b2af1..a69bd59 100644
--- a/src/app/(AuthLayout)/auth/info/components/AdditionalLink/AdditionalLink.tsx
+++ b/src/app/(AuthLayout)/auth/info/components/AdditionalLink/AdditionalLink.tsx
@@ -1,5 +1,4 @@
 import { KeyboardEvent } from 'react';
-import { useFormContext } from 'react-hook-form';
 
 import Input from '@/components/common/Input';
 import RemoveIcon from '@/assets/icons/close.svg';
@@ -8,12 +7,11 @@ import styles from './AdditionalLink.module.scss';
 
 interface AdditionalLinkProps {
   index: number;
-  removeHandler: (index: number) => void;
+  id: string;
+  removeHandler: (index: string) => void;
 }
 
-const AdditionalLink = ({ index, removeHandler }: AdditionalLinkProps) => {
-  const { register } = useFormContext();
-
+const AdditionalLink = ({ index, id, removeHandler }: AdditionalLinkProps) => {
   const keyupHandler = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       e.preventDefault();
@@ -30,14 +28,13 @@ const AdditionalLink = ({ index, removeHandler }: AdditionalLinkProps) => {
           <button
             type="button"
             className={styles.remove_link_button}
-            onClick={() => removeHandler(index)}
+            onClick={() => removeHandler(id)}
             aria-label="remove-link"
           >
             <RemoveIcon />
           </button>
         )
       }
-      {...register(`links.${index}.link`)}
     />
   );
 };
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 18cbc33..88a7c2e 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
+import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
@@ -31,6 +32,23 @@ const AdditionalInfoPage = () => {
   const methods = useForm<IAddionalInfoType>({
     defaultValues: { links: [{ link: '' }], interests: [], myInterests: [] },
   });
+  const [userSocialAccounts, setUserSocialAccounts] = useState<
+    { id: string; socialAccount: string }[]
+  >([{ id: Date.now().toLocaleString(), socialAccount: '' }]);
+  // const [userInterests, setUserInterests] = useState<string[]>([]);
+
+  const addUserSocialAccount = () => {
+    setUserSocialAccounts((prev) => [
+      ...prev,
+      { id: Date.now().toLocaleString(), socialAccount: '' },
+    ]);
+  };
+
+  const removeUserSocialAccount = (removeTargetId: string) => {
+    setUserSocialAccounts((prev) =>
+      prev.filter(({ id }) => id !== removeTargetId),
+    );
+  };
 
   const {
     control,
@@ -39,16 +57,6 @@ const AdditionalInfoPage = () => {
     formState: { errors },
   } = methods;
 
-  const {
-    fields: linkFields,
-    appendField: appendLink,
-    removeField: removeLink,
-  } = useAdditionalInfoFieldArray<IAddionalInfoType>({
-    name: 'links',
-    control,
-    fieldLimit: LINK_FIELDS_LIMIT,
-  });
-
   const {
     fields: myInterestsFields,
     appendField: appendMyInterest,
@@ -63,10 +71,13 @@ const AdditionalInfoPage = () => {
   const { requestSaveInterest } = useInterestsServerRequests();
 
   const submitHandler: SubmitHandler<IAddionalInfoType> = async (values) => {
-    const { links, interests, myInterests } = values;
+    const { interests, myInterests } = values;
 
     const userId = getUserId();
-    const uniqueSocialAccounts = links.filter((v) => !!v.link);
+    const uniqueSocialAccounts = userSocialAccounts
+      .map(({ socialAccount }) => socialAccount)
+      .filter((socialAccount) => !!socialAccount);
+
     const myInterestsNames = myInterests.map(({ myInterest }) => ({
       userId,
       interestName: myInterest,
@@ -111,19 +122,20 @@ const AdditionalInfoPage = () => {
           <Field>
             <Field.Label htmlFor="links">링크 (최대 3개)</Field.Label>
             <Field.Box className={styles.link_field}>
-              {linkFields.map((field, index) => (
+              {userSocialAccounts.map((field, index) => (
                 <AdditionalLink
                   key={field.id}
+                  id={field.id}
                   index={index}
-                  removeHandler={() => removeLink(index)}
+                  removeHandler={removeUserSocialAccount}
                 />
               ))}
-              {linkFields.length !== LINK_FIELDS_LIMIT && (
+              {userSocialAccounts.length !== LINK_FIELDS_LIMIT && (
                 <Button
                   type="button"
                   fill="white"
                   className={styles.link_button}
-                  onClick={() => appendLink({ link: '' })}
+                  onClick={addUserSocialAccount}
                 >
                   <PlusIcon width="20" />
                 </Button>
diff --git a/src/hooks/useSocialAccountsServerRequests.ts b/src/hooks/useSocialAccountsServerRequests.ts
index f01f78f..7a18fc4 100644
--- a/src/hooks/useSocialAccountsServerRequests.ts
+++ b/src/hooks/useSocialAccountsServerRequests.ts
@@ -5,12 +5,8 @@ import {
 import { requestPromiseAll } from '@/utils/asyncLogic';
 import { useToastContext } from '@/components/common/Toast/ToastProvider';
 
-type SocialAccountType = {
-  link: string;
-};
-
 type RequestSaveInterestType = {
-  targetSocialAccounts: SocialAccountType[];
+  targetSocialAccounts: string[];
   onSuccess?: () => void;
   onError?: () => void;
   successMessage?: string;
@@ -28,20 +24,17 @@ const useSocialAccountsServerRequest = () => {
     onError,
     successMessage,
   }: RequestSaveInterestType) => {
-    const successfulSocialRequests: SocialAccountType[] = [];
+    const successfulSocialRequests: string[] = [];
 
     try {
-      await requestPromiseAll<SocialAccountType>(
+      await requestPromiseAll<string>(
         targetSocialAccounts,
-        async ({ link: socialAccountUrl }) =>
-          saveSocialAccount(
-            { socialAccountUrl },
-            {
-              onSuccess: () => {
-                successfulSocialRequests.push({ link: socialAccountUrl });
-              },
+        async (socialAccount: string) =>
+          saveSocialAccount(socialAccount, {
+            onSuccess: () => {
+              successfulSocialRequests.push(socialAccount);
             },
-          ),
+          }),
       );
 
       if (successMessage) {
@@ -55,10 +48,10 @@ const useSocialAccountsServerRequest = () => {
         onSuccess();
       }
     } catch (error) {
-      await requestPromiseAll<SocialAccountType>(
+      await requestPromiseAll<string>(
         successfulSocialRequests,
-        async ({ link: socialAccountUrl }) => {
-          removeSocialAccount({ socialAccountUrl });
+        async (socialAccount) => {
+          removeSocialAccount(socialAccount);
         },
       );
 

From bdf7122f41d4de1ac33082b70bb3a64a935ae585 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Wed, 5 Feb 2025 18:25:18 +0900
Subject: [PATCH 12/18] [refact] remove react-hook-form API

---
 .../InterestCheckbox/InterstCheckbox.tsx      |  61 ++--
 .../MyInterestField/MyInterestField.tsx       |  57 ++--
 src/app/(AuthLayout)/auth/info/page.tsx       | 290 +++++++++++-------
 3 files changed, 250 insertions(+), 158 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/info/components/InterestCheckbox/InterstCheckbox.tsx b/src/app/(AuthLayout)/auth/info/components/InterestCheckbox/InterstCheckbox.tsx
index d8f06eb..f3e9365 100644
--- a/src/app/(AuthLayout)/auth/info/components/InterestCheckbox/InterstCheckbox.tsx
+++ b/src/app/(AuthLayout)/auth/info/components/InterestCheckbox/InterstCheckbox.tsx
@@ -1,40 +1,63 @@
 'use client';
 
 import clsx from 'clsx';
-import { useFormContext } from 'react-hook-form';
-import { HTMLAttributes, useState } from 'react';
+import { HTMLAttributes, useEffect, useState } from 'react';
 
 import styles from './InterestCheckbox.module.scss';
 
-interface InterestCheckboxType extends HTMLAttributes<HTMLInputElement> {
+interface InterestCheckboxType extends HTMLAttributes<HTMLButtonElement> {
   value: string;
+  isMax: boolean;
+  isCheckedInterest?: boolean;
+  onClickWithChecked: () => void;
+  onClickWithUnchecked: () => void;
 }
 
-const InterestCheckbox = ({ value, ...props }: InterestCheckboxType) => {
-  const [isChecked, setIsChecked] = useState<boolean>(false);
-  const { register } = useFormContext();
+const InterestCheckbox = ({
+  value,
+  isMax,
+  isCheckedInterest,
+  onClickWithChecked,
+  onClickWithUnchecked,
+  ...props
+}: InterestCheckboxType) => {
+  const [isChecked, setIsChecked] = useState<boolean | undefined>(
+    isCheckedInterest,
+  );
 
-  const handleChange = () => {
-    setIsChecked((prev) => !prev);
+  const clickHandler = () => {
+    if (!isChecked && isMax === false) {
+      onClickWithUnchecked();
+      setIsChecked(true);
+    }
+    if (!isChecked && isMax === true) {
+      setIsChecked(false);
+    }
+    if (isChecked && isMax === false) {
+      setIsChecked(false);
+      onClickWithChecked();
+    }
+    if (isChecked && isMax === true) {
+      setIsChecked(false);
+      onClickWithChecked();
+    }
   };
 
+  useEffect(() => {
+    setIsChecked(isCheckedInterest);
+  }, [isCheckedInterest]);
+
   return (
-    <label
-      htmlFor={value}
+    <button
+      type="button"
       className={clsx(styles.checkbox, {
         [styles.checked]: isChecked,
       })}
-      onChange={handleChange}
+      onClick={clickHandler}
+      {...props}
     >
-      <input
-        id={value}
-        type="checkbox"
-        value={value}
-        {...props}
-        {...register('interests')}
-      />
       {`#${value}`}
-    </label>
+    </button>
   );
 };
 
diff --git a/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx b/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
index ea73f79..34c5161 100644
--- a/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
+++ b/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
@@ -3,61 +3,64 @@
 import clsx from 'clsx';
 import {
   useState,
-  FocusEvent,
   ChangeEvent,
   KeyboardEvent,
   HTMLAttributes,
+  useRef,
+  useEffect,
 } from 'react';
-import { useFormContext } from 'react-hook-form';
 
 import { REG_EXP } from '@/constants/regExp';
 import { calculateWidth } from '@/utils/dynamicWidth';
 import CircleCloseIcon from '@/assets/icons/circle-close.svg';
-import { IAddionalInfoType } from '../../types/AdditionalInfoTypes';
 
 import styles from './MyInterestField.module.scss';
 
+type UserInterestType = { id: string; interestName: string };
+
 interface MyInterestFieldProps
   extends Omit<HTMLAttributes<HTMLInputElement>, 'onClick'> {
-  index: number;
+  field: UserInterestType;
   checkList: string[];
-  onRemove: (index: number) => void;
+  onRemove: (id: string) => void;
+  changeError: (boolean: boolean) => void;
+  updateUserInterest: (field: UserInterestType) => void;
 }
 
 const MyInterestField = ({
-  index,
+  field,
   checkList,
   onRemove,
+  changeError,
+  updateUserInterest,
   ...props
 }: MyInterestFieldProps) => {
   const [word, setIsWord] = useState<string>('');
   const [isEditing, setIsEditing] = useState<boolean>(true);
-  const { register, setError, clearErrors } =
-    useFormContext<IAddionalInfoType>();
-  const { onChange, onBlur, ...formProps } = register(
-    `myInterests.${index}.myInterest`,
-  );
+  const inputRef = useRef<HTMLInputElement>(null);
 
   const inputWidth = calculateWidth(word.length);
 
-  const noticeDuplicateError = () =>
-    setError('myInterests', {
-      type: 'validate',
-      message: '중복된 관심사입니다.',
-    });
+  const noticeDuplicateError = () => changeError(true);
 
   const isDuplicate = () => {
     if (word !== '' && checkList.includes(word)) {
       noticeDuplicateError();
-      onRemove(index);
+      onRemove(field.id);
       return true;
     }
     return false;
   };
 
+  const updateInterest = () => {
+    updateUserInterest({ id: field.id, interestName: word });
+    setIsEditing(false);
+    changeError(false);
+  };
+
   const clickHandler = () => {
     if (!isEditing) {
-      onRemove(index);
+      onRemove(field.id);
     }
   };
 
@@ -66,20 +69,17 @@ const MyInterestField = ({
     if (isEditing && isDuplicate()) return;
     e.preventDefault();
 
-    setIsEditing(false);
-    clearErrors('myInterests');
+    updateInterest();
   };
 
-  const blurHandler = (e: FocusEvent<HTMLInputElement>) => {
+  const blurHandler = () => {
     if (!word.length) {
-      onRemove(index);
+      onRemove(field.id);
       return;
     }
     if (isEditing && isDuplicate()) return;
 
-    onBlur(e);
-    setIsEditing(false);
-    clearErrors('myInterests');
+    updateInterest();
   };
 
   const changeHandler = (e: ChangeEvent<HTMLInputElement>) => {
@@ -87,10 +87,13 @@ const MyInterestField = ({
 
     if (REG_EXP.ONLY_ENG_NUM.test(next)) {
       setIsWord(() => next);
-      onChange(e);
     }
   };
 
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <button
       type="button"
@@ -102,6 +105,7 @@ const MyInterestField = ({
     >
       <input
         type={isEditing ? 'text' : 'hidden'}
+        ref={inputRef}
         value={word}
         className={styles.input}
         style={{ width: inputWidth }}
@@ -109,7 +113,6 @@ const MyInterestField = ({
         onChange={changeHandler}
         onBlur={blurHandler}
         onKeyDown={keydownHandler}
-        {...formProps}
         {...props}
       />
       {!isEditing && (
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 88a7c2e..f6d53e5 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -1,9 +1,8 @@
 'use client';
 
 import clsx from 'clsx';
-import { useState } from 'react';
+import { FormEvent, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { FormProvider, SubmitHandler, useForm } from 'react-hook-form';
 
 import { RECOMMANED_INTERESTS } from '@/data/mock';
 import Logo from '@/components/common/Logo';
@@ -18,24 +17,48 @@ import PlusIcon from '@/assets/icons/plus.svg';
 import AdditionalLink from './components/AdditionalLink';
 import MyInterestField from './components/MyInterestField';
 import InterestCheckbox from './components/InterestCheckbox';
-import { IAddionalInfoType } from './types/AdditionalInfoTypes';
-import useAdditionalInfoFieldArray from './hooks/useAdditionalInfoFieldArray';
 
 import styles from './page.module.scss';
 
 const LINK_FIELDS_LIMIT = 3;
 const MY_INTERESTS_FIELDS_LIMIT = 10;
 
+const generateId = () => Date.now().toLocaleString();
+
+type UserInterestType = { id: string; interestName: string };
+type UserSocialAccountType = { id: string; socialAccount: string };
+type UserInterestsType = {
+  recommended: UserInterestType[];
+  user: UserInterestType[];
+};
+
 const AdditionalInfoPage = () => {
   const router = useRouter();
   const { addToast } = useToastContext();
-  const methods = useForm<IAddionalInfoType>({
-    defaultValues: { links: [{ link: '' }], interests: [], myInterests: [] },
-  });
+
   const [userSocialAccounts, setUserSocialAccounts] = useState<
-    { id: string; socialAccount: string }[]
+    UserSocialAccountType[]
   >([{ id: Date.now().toLocaleString(), socialAccount: '' }]);
-  // const [userInterests, setUserInterests] = useState<string[]>([]);
+  const [userInterests, setUserInterests] = useState<UserInterestsType>({
+    recommended: [],
+    user: [],
+  });
+  const [isError, setIsError] = useState<boolean>(false);
+
+  const currentInterestList = useMemo(
+    () => [...userInterests.user, ...userInterests.recommended],
+    [userInterests],
+  );
+
+  const currentInterestStringList = useMemo(
+    () => [
+      ...userInterests.user.map(({ interestName }) => interestName),
+      ...userInterests.recommended.map(({ interestName }) => interestName),
+    ],
+    [userInterests],
+  );
+
+  const isMax = currentInterestStringList.length >= MY_INTERESTS_FIELDS_LIMIT;
 
   const addUserSocialAccount = () => {
     setUserSocialAccounts((prev) => [
@@ -50,52 +73,83 @@ const AdditionalInfoPage = () => {
     );
   };
 
-  const {
-    control,
-    getValues,
-    handleSubmit,
-    formState: { errors },
-  } = methods;
-
-  const {
-    fields: myInterestsFields,
-    appendField: appendMyInterest,
-    removeField: removeMyInterest,
-  } = useAdditionalInfoFieldArray<IAddionalInfoType>({
-    name: 'myInterests',
-    control,
-    fieldLimit: MY_INTERESTS_FIELDS_LIMIT,
-  });
+  const addUserInterest = (interstName?: string) => {
+    if (isMax) return;
+    setUserInterests(({ recommended, user }) => ({
+      recommended,
+      user: [
+        ...user,
+        {
+          id: generateId(),
+          interestName: interstName ?? '',
+        },
+      ],
+    }));
+  };
+
+  const addRecommendedInterest = (interstName?: string) => {
+    if (isMax) return;
+    setUserInterests(({ user, recommended }) => ({
+      user,
+      recommended: [
+        ...recommended,
+        {
+          id: generateId(),
+          interestName: interstName ?? '',
+        },
+      ],
+    }));
+  };
+
+  const updateUserInterest = (field: UserInterestType) => {
+    setUserInterests(({ recommended, user }) => ({
+      recommended,
+      user: user.map((interest) =>
+        interest.id === field.id ? field : interest,
+      ),
+    }));
+  };
+
+  const removeUserInterest = (removeTargetId: string) => {
+    setUserInterests(({ recommended, user }) => ({
+      recommended: recommended.filter(({ id }) => id !== removeTargetId),
+      user: user.filter(({ id }) => id !== removeTargetId),
+    }));
+  };
+
+  const changeError = (bool: boolean) => {
+    setIsError(bool);
+  };
+
+  console.log(userInterests);
 
   const { requestSaveSocialAccounts } = useSocialAccountsServerRequest();
   const { requestSaveInterest } = useInterestsServerRequests();
 
-  const submitHandler: SubmitHandler<IAddionalInfoType> = async (values) => {
-    const { interests, myInterests } = values;
-
+  const submitHandler = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
     const userId = getUserId();
+    console.log(userId);
+
     const uniqueSocialAccounts = userSocialAccounts
       .map(({ socialAccount }) => socialAccount)
       .filter((socialAccount) => !!socialAccount);
 
-    const myInterestsNames = myInterests.map(({ myInterest }) => ({
-      userId,
-      interestName: myInterest,
-    }));
-    const interestNames = interests.map((interestName) => ({
-      userId,
-      interestName,
-    }));
-    const wholeInterestName = [...myInterestsNames, ...interestNames];
-
     if (uniqueSocialAccounts.length) {
       requestSaveSocialAccounts({
         targetSocialAccounts: uniqueSocialAccounts,
       });
     }
 
+    const interestNamesWithUserId = currentInterestList.map(
+      ({ interestName }) => ({
+        userId,
+        interestName,
+      }),
+    );
+
     requestSaveInterest({
-      targetInterests: wholeInterestName,
+      targetInterests: interestNamesWithUserId,
       onSuccess: () => {
         addToast({
           type: 'success',
@@ -107,85 +161,97 @@ const AdditionalInfoPage = () => {
     });
   };
 
-  const currentInterestList = [
-    ...getValues('interests'),
-    ...getValues('myInterests').map(({ myInterest }) => myInterest),
-  ];
-
   return (
     <div className={styles.container}>
       <Logo isGoHome={false} />
 
-      <form onSubmit={handleSubmit(submitHandler)}>
-        <FormProvider {...methods}>
-          <h1 className={styles.sub_title}>추가 정보</h1>
-          <Field>
-            <Field.Label htmlFor="links">링크 (최대 3개)</Field.Label>
-            <Field.Box className={styles.link_field}>
-              {userSocialAccounts.map((field, index) => (
-                <AdditionalLink
-                  key={field.id}
-                  id={field.id}
-                  index={index}
-                  removeHandler={removeUserSocialAccount}
-                />
-              ))}
-              {userSocialAccounts.length !== LINK_FIELDS_LIMIT && (
-                <Button
-                  type="button"
-                  fill="white"
-                  className={styles.link_button}
-                  onClick={addUserSocialAccount}
-                >
-                  <PlusIcon width="20" />
-                </Button>
-              )}
-            </Field.Box>
-          </Field>
-          <Field>
-            <Field.Label>추천 관심사</Field.Label>
-            <Field.Box
-              className={clsx(styles.field_box, styles.interest_field_box)}
-            >
-              {RECOMMANED_INTERESTS.map((interest) => (
-                <InterestCheckbox key={interest} value={interest} />
-              ))}
-            </Field.Box>
-          </Field>
-
-          <Field>
-            <Field.Label>나만의 관심사를 추가해보세요! (최대 10개)</Field.Label>
-            {errors.myInterests && (
-              <p className={styles.interest_error}>
-                {errors.myInterests.message}
-              </p>
+      <form onSubmit={submitHandler}>
+        <h1 className={styles.sub_title}>추가 정보</h1>
+        <Field>
+          <Field.Label htmlFor="links">링크 (최대 3개)</Field.Label>
+          <Field.Box className={styles.link_field}>
+            {userSocialAccounts.map((field, index) => (
+              <AdditionalLink
+                key={field.id}
+                id={field.id}
+                index={index}
+                removeHandler={removeUserSocialAccount}
+              />
+            ))}
+            {userSocialAccounts.length !== LINK_FIELDS_LIMIT && (
+              <Button
+                type="button"
+                fill="white"
+                className={styles.link_button}
+                onClick={addUserSocialAccount}
+              >
+                <PlusIcon width="20" />
+              </Button>
             )}
-            <Field.Box
-              className={clsx(styles.field_box, styles.my_interest_field_box)}
-            >
-              {myInterestsFields.map((field, index) => (
-                <MyInterestField
-                  key={field.id}
-                  index={index}
-                  checkList={currentInterestList}
-                  onRemove={removeMyInterest}
+          </Field.Box>
+        </Field>
+        <Field>
+          <Field.Label>추천 관심사</Field.Label>
+          <Field.Box
+            className={clsx(styles.field_box, styles.interest_field_box)}
+          >
+            {RECOMMANED_INTERESTS.map((interest) => {
+              const findedInterestId = currentInterestList.find(
+                ({ interestName }) => interestName === interest,
+              )?.id;
+
+              const removeInterestIfinterestIsMatched = () => {
+                if (findedInterestId) {
+                  removeUserInterest(findedInterestId);
+                }
+              };
+
+              return (
+                <InterestCheckbox
+                  key={interest}
+                  value={interest}
+                  isMax={isMax}
+                  isCheckedInterest={Boolean(findedInterestId)}
+                  onClickWithChecked={removeInterestIfinterestIsMatched}
+                  onClickWithUnchecked={() => addRecommendedInterest(interest)}
                 />
-              ))}
-
-              {myInterestsFields.length !== MY_INTERESTS_FIELDS_LIMIT && (
-                <Button
-                  type="button"
-                  fill="white"
-                  className={styles.interest_button}
-                  onClick={() => appendMyInterest({ myInterest: '' })}
-                >
-                  <PlusIcon width="20" />
-                </Button>
-              )}
-            </Field.Box>
-          </Field>
-          <Button>회원가입 완료</Button>
-        </FormProvider>
+              );
+            })}
+          </Field.Box>
+        </Field>
+
+        <Field>
+          <Field.Label>나만의 관심사를 추가해보세요! (최대 10개)</Field.Label>
+          {isError && (
+            <p className={styles.interest_error}>중복된 관심사 입니다.</p>
+          )}
+          <Field.Box
+            className={clsx(styles.field_box, styles.my_interest_field_box)}
+          >
+            {userInterests.user.map((field) => (
+              <MyInterestField
+                key={field.id}
+                field={field}
+                checkList={currentInterestStringList}
+                onRemove={removeUserInterest}
+                changeError={changeError}
+                updateUserInterest={updateUserInterest}
+              />
+            ))}
+
+            {isMax === false && (
+              <Button
+                type="button"
+                fill="white"
+                className={styles.interest_button}
+                onClick={() => addUserInterest()}
+              >
+                <PlusIcon width="20" />
+              </Button>
+            )}
+          </Field.Box>
+        </Field>
+        <Button>회원가입 완료</Button>
       </form>
     </div>
   );

From 763ce829ee9ba518e19c8fdd7ce0b0f7621131ae Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Wed, 5 Feb 2025 18:37:43 +0900
Subject: [PATCH 13/18] [refact] combine with addUserInterest and
 addRecommendedInterest

---
 src/app/(AuthLayout)/auth/info/page.tsx | 60 +++++++++++--------------
 1 file changed, 26 insertions(+), 34 deletions(-)

diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index f6d53e5..9d514be 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -35,10 +35,12 @@ type UserInterestsType = {
 const AdditionalInfoPage = () => {
   const router = useRouter();
   const { addToast } = useToastContext();
+  const { requestSaveSocialAccounts } = useSocialAccountsServerRequest();
+  const { requestSaveInterest } = useInterestsServerRequests();
 
   const [userSocialAccounts, setUserSocialAccounts] = useState<
     UserSocialAccountType[]
-  >([{ id: Date.now().toLocaleString(), socialAccount: '' }]);
+  >([{ id: generateId(), socialAccount: '' }]);
   const [userInterests, setUserInterests] = useState<UserInterestsType>({
     recommended: [],
     user: [],
@@ -63,7 +65,7 @@ const AdditionalInfoPage = () => {
   const addUserSocialAccount = () => {
     setUserSocialAccounts((prev) => [
       ...prev,
-      { id: Date.now().toLocaleString(), socialAccount: '' },
+      { id: generateId(), socialAccount: '' },
     ]);
   };
 
@@ -73,32 +75,23 @@ const AdditionalInfoPage = () => {
     );
   };
 
-  const addUserInterest = (interstName?: string) => {
+  const addInterest = (type: 'user' | 'recommended', interestName?: string) => {
     if (isMax) return;
-    setUserInterests(({ recommended, user }) => ({
-      recommended,
-      user: [
-        ...user,
-        {
-          id: generateId(),
-          interestName: interstName ?? '',
-        },
-      ],
-    }));
-  };
-
-  const addRecommendedInterest = (interstName?: string) => {
-    if (isMax) return;
-    setUserInterests(({ user, recommended }) => ({
-      user,
-      recommended: [
-        ...recommended,
-        {
-          id: generateId(),
-          interestName: interstName ?? '',
-        },
-      ],
-    }));
+    setUserInterests(({ user, recommended }) => {
+      const newInterest = {
+        id: generateId(),
+        interestName: interestName ?? '',
+      };
+
+      const nextUser = type === 'user' ? [...user, newInterest] : user;
+      const nextRecommended =
+        type === 'recommended' ? [...recommended, newInterest] : recommended;
+
+      return {
+        user: nextUser,
+        recommended: nextRecommended,
+      };
+    });
   };
 
   const updateUserInterest = (field: UserInterestType) => {
@@ -121,11 +114,6 @@ const AdditionalInfoPage = () => {
     setIsError(bool);
   };
 
-  console.log(userInterests);
-
-  const { requestSaveSocialAccounts } = useSocialAccountsServerRequest();
-  const { requestSaveInterest } = useInterestsServerRequests();
-
   const submitHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const userId = getUserId();
@@ -161,6 +149,8 @@ const AdditionalInfoPage = () => {
     });
   };
 
+  console.log(userInterests);
+
   return (
     <div className={styles.container}>
       <Logo isGoHome={false} />
@@ -213,7 +203,9 @@ const AdditionalInfoPage = () => {
                   isMax={isMax}
                   isCheckedInterest={Boolean(findedInterestId)}
                   onClickWithChecked={removeInterestIfinterestIsMatched}
-                  onClickWithUnchecked={() => addRecommendedInterest(interest)}
+                  onClickWithUnchecked={() =>
+                    addInterest('recommended', interest)
+                  }
                 />
               );
             })}
@@ -244,7 +236,7 @@ const AdditionalInfoPage = () => {
                 type="button"
                 fill="white"
                 className={styles.interest_button}
-                onClick={() => addUserInterest()}
+                onClick={() => addInterest('user')}
               >
                 <PlusIcon width="20" />
               </Button>

From bb130f3c0b6f2887c5ed42ee981d3b26667afb4f Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Mon, 10 Feb 2025 16:48:08 +0900
Subject: [PATCH 14/18] [feat] remove react-hook-form Array API logic

---
 .../MyInterestField/MyInterestField.tsx       |  18 ---
 .../RecommendedInterests.tsx                  |  43 +++++++
 .../components/RecommededInterests/index.ts   |   1 +
 .../info/hooks/useAdditionalInfoFieldArray.ts |  43 -------
 src/app/(AuthLayout)/auth/info/page.tsx       | 115 +++++++-----------
 src/app/(AuthLayout)/auth/info/types/info.ts  |   6 +
 6 files changed, 97 insertions(+), 129 deletions(-)
 create mode 100644 src/app/(AuthLayout)/auth/info/components/RecommededInterests/RecommendedInterests.tsx
 create mode 100644 src/app/(AuthLayout)/auth/info/components/RecommededInterests/index.ts
 delete mode 100644 src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoFieldArray.ts
 create mode 100644 src/app/(AuthLayout)/auth/info/types/info.ts

diff --git a/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx b/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
index 34c5161..44fe391 100644
--- a/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
+++ b/src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx
@@ -21,17 +21,13 @@ type UserInterestType = { id: string; interestName: string };
 interface MyInterestFieldProps
   extends Omit<HTMLAttributes<HTMLInputElement>, 'onClick'> {
   field: UserInterestType;
-  checkList: string[];
   onRemove: (id: string) => void;
-  changeError: (boolean: boolean) => void;
   updateUserInterest: (field: UserInterestType) => void;
 }
 
 const MyInterestField = ({
   field,
-  checkList,
   onRemove,
-  changeError,
   updateUserInterest,
   ...props
 }: MyInterestFieldProps) => {
@@ -41,21 +37,9 @@ const MyInterestField = ({
 
   const inputWidth = calculateWidth(word.length);
 
-  const noticeDuplicateError = () => changeError(true);
-
-  const isDuplicate = () => {
-    if (word !== '' && checkList.includes(word)) {
-      noticeDuplicateError();
-      onRemove(field.id);
-      return true;
-    }
-    return false;
-  };
-
   const updateInterest = () => {
     updateUserInterest({ id: field.id, interestName: word });
     setIsEditing(false);
-    changeError(false);
   };
 
   const clickHandler = () => {
@@ -66,7 +50,6 @@ const MyInterestField = ({
 
   const keydownHandler = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key !== ' ' && e.key !== 'Enter') return;
-    if (isEditing && isDuplicate()) return;
     e.preventDefault();
 
     updateInterest();
@@ -77,7 +60,6 @@ const MyInterestField = ({
       onRemove(field.id);
       return;
     }
-    if (isEditing && isDuplicate()) return;
 
     updateInterest();
   };
diff --git a/src/app/(AuthLayout)/auth/info/components/RecommededInterests/RecommendedInterests.tsx b/src/app/(AuthLayout)/auth/info/components/RecommededInterests/RecommendedInterests.tsx
new file mode 100644
index 0000000..8c40d07
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/info/components/RecommededInterests/RecommendedInterests.tsx
@@ -0,0 +1,43 @@
+import { RECOMMANED_INTERESTS } from '@/data/mock';
+
+import { UserInterestType } from '../../types/info';
+import InterestCheckbox from '../InterestCheckbox';
+
+interface RecommandedInterestsProps {
+  isMax: boolean;
+  interests: UserInterestType[];
+  addInterest: (type: 'user' | 'recommended', interestName?: string) => void;
+  removeInterest: (removeTargetId: string) => void;
+}
+
+const RecommandedInterests = ({
+  isMax,
+  interests,
+  addInterest,
+  removeInterest,
+}: RecommandedInterestsProps) => {
+  return RECOMMANED_INTERESTS.map((interest) => {
+    const findedInterestId = interests.find(
+      ({ interestName }) => interestName === interest,
+    )?.id;
+
+    const removeInterestIfinterestIsMatched = () => {
+      if (findedInterestId) {
+        removeInterest(findedInterestId);
+      }
+    };
+
+    return (
+      <InterestCheckbox
+        key={interest}
+        value={interest}
+        isMax={isMax}
+        isCheckedInterest={Boolean(findedInterestId)}
+        onClickWithChecked={removeInterestIfinterestIsMatched}
+        onClickWithUnchecked={() => addInterest('recommended', interest)}
+      />
+    );
+  });
+};
+
+export default RecommandedInterests;
diff --git a/src/app/(AuthLayout)/auth/info/components/RecommededInterests/index.ts b/src/app/(AuthLayout)/auth/info/components/RecommededInterests/index.ts
new file mode 100644
index 0000000..98346d1
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/info/components/RecommededInterests/index.ts
@@ -0,0 +1 @@
+export { default } from './RecommendedInterests';
diff --git a/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoFieldArray.ts b/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoFieldArray.ts
deleted file mode 100644
index ee539e2..0000000
--- a/src/app/(AuthLayout)/auth/info/hooks/useAdditionalInfoFieldArray.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import {
-  Control,
-  FieldArray,
-  FieldArrayPath,
-  FieldValues,
-  useFieldArray,
-} from 'react-hook-form';
-
-interface useAdditionalInfoFieldArrayProps<
-  TFieldValues extends FieldValues,
-  TFieldArrayName extends FieldArrayPath<TFieldValues>,
-> {
-  name: TFieldArrayName;
-  control: Control<TFieldValues>;
-  fieldLimit: number;
-}
-
-const useAdditionalInfoFieldArray = <
-  TFieldValues extends FieldValues,
-  TFieldArrayName extends
-    FieldArrayPath<TFieldValues> = FieldArrayPath<TFieldValues>,
->({
-  name,
-  control,
-  fieldLimit,
-}: useAdditionalInfoFieldArrayProps<TFieldValues, TFieldArrayName>) => {
-  const { fields, append, remove, ...returns } = useFieldArray<TFieldValues>({
-    name,
-    control,
-  });
-
-  const appendField = (value: FieldArray<TFieldValues>) => {
-    if (fields.length < fieldLimit) {
-      append(value);
-    }
-  };
-
-  const removeField = (index: number) => remove(index);
-
-  return { fields, appendField, removeField, ...returns };
-};
-
-export default useAdditionalInfoFieldArray;
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 9d514be..88a2946 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -4,7 +4,6 @@ import clsx from 'clsx';
 import { FormEvent, useMemo, useState } from 'react';
 import { useRouter } from 'next/navigation';
 
-import { RECOMMANED_INTERESTS } from '@/data/mock';
 import Logo from '@/components/common/Logo';
 import Field from '@/components/common/Field';
 import Button from '@/components/common/Button';
@@ -14,9 +13,14 @@ import useInterestsServerRequests from '@/hooks/useInterestsServerRequests';
 import useSocialAccountsServerRequest from '@/hooks/useSocialAccountsServerRequests';
 
 import PlusIcon from '@/assets/icons/plus.svg';
+import {
+  UserInterestType,
+  UserInterestsType,
+  UserSocialAccountType,
+} from './types/info';
 import AdditionalLink from './components/AdditionalLink';
 import MyInterestField from './components/MyInterestField';
-import InterestCheckbox from './components/InterestCheckbox';
+import RecommandedInterests from './components/RecommededInterests';
 
 import styles from './page.module.scss';
 
@@ -25,13 +29,6 @@ const MY_INTERESTS_FIELDS_LIMIT = 10;
 
 const generateId = () => Date.now().toLocaleString();
 
-type UserInterestType = { id: string; interestName: string };
-type UserSocialAccountType = { id: string; socialAccount: string };
-type UserInterestsType = {
-  recommended: UserInterestType[];
-  user: UserInterestType[];
-};
-
 const AdditionalInfoPage = () => {
   const router = useRouter();
   const { addToast } = useToastContext();
@@ -41,11 +38,11 @@ const AdditionalInfoPage = () => {
   const [userSocialAccounts, setUserSocialAccounts] = useState<
     UserSocialAccountType[]
   >([{ id: generateId(), socialAccount: '' }]);
+
   const [userInterests, setUserInterests] = useState<UserInterestsType>({
     recommended: [],
     user: [],
   });
-  const [isError, setIsError] = useState<boolean>(false);
 
   const currentInterestList = useMemo(
     () => [...userInterests.user, ...userInterests.recommended],
@@ -54,8 +51,10 @@ const AdditionalInfoPage = () => {
 
   const currentInterestStringList = useMemo(
     () => [
-      ...userInterests.user.map(({ interestName }) => interestName),
-      ...userInterests.recommended.map(({ interestName }) => interestName),
+      ...new Set([
+        ...userInterests.user.map(({ interestName }) => interestName),
+        ...userInterests.recommended.map(({ interestName }) => interestName),
+      ]),
     ],
     [userInterests],
   );
@@ -77,29 +76,15 @@ const AdditionalInfoPage = () => {
 
   const addInterest = (type: 'user' | 'recommended', interestName?: string) => {
     if (isMax) return;
-    setUserInterests(({ user, recommended }) => {
-      const newInterest = {
-        id: generateId(),
-        interestName: interestName ?? '',
-      };
-
-      const nextUser = type === 'user' ? [...user, newInterest] : user;
-      const nextRecommended =
-        type === 'recommended' ? [...recommended, newInterest] : recommended;
-
-      return {
-        user: nextUser,
-        recommended: nextRecommended,
-      };
-    });
-  };
 
-  const updateUserInterest = (field: UserInterestType) => {
-    setUserInterests(({ recommended, user }) => ({
-      recommended,
-      user: user.map((interest) =>
-        interest.id === field.id ? field : interest,
-      ),
+    const newInterest = {
+      id: generateId(),
+      interestName: interestName ?? '',
+    };
+
+    setUserInterests((prev) => ({
+      ...prev,
+      [type]: [...prev[type], newInterest],
     }));
   };
 
@@ -110,14 +95,33 @@ const AdditionalInfoPage = () => {
     }));
   };
 
-  const changeError = (bool: boolean) => {
-    setIsError(bool);
+  const updateUserInterest = (field: UserInterestType) => {
+    const newUserInterests: UserInterestType[] = [];
+
+    setUserInterests(({ recommended, user }) => ({
+      recommended,
+      user: user.reduce((acc, cur) => {
+        if (cur.id === field.id) {
+          const duplicateInterests = acc.filter(
+            (target) => target.interestName === cur.interestName,
+          ).length;
+          if (duplicateInterests > 0) {
+            return acc;
+          }
+
+          acc.push(field);
+          return acc;
+        }
+
+        acc.push(cur);
+        return acc;
+      }, newUserInterests),
+    }));
   };
 
   const submitHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const userId = getUserId();
-    console.log(userId);
 
     const uniqueSocialAccounts = userSocialAccounts
       .map(({ socialAccount }) => socialAccount)
@@ -149,8 +153,6 @@ const AdditionalInfoPage = () => {
     });
   };
 
-  console.log(userInterests);
-
   return (
     <div className={styles.container}>
       <Logo isGoHome={false} />
@@ -185,38 +187,17 @@ const AdditionalInfoPage = () => {
           <Field.Box
             className={clsx(styles.field_box, styles.interest_field_box)}
           >
-            {RECOMMANED_INTERESTS.map((interest) => {
-              const findedInterestId = currentInterestList.find(
-                ({ interestName }) => interestName === interest,
-              )?.id;
-
-              const removeInterestIfinterestIsMatched = () => {
-                if (findedInterestId) {
-                  removeUserInterest(findedInterestId);
-                }
-              };
-
-              return (
-                <InterestCheckbox
-                  key={interest}
-                  value={interest}
-                  isMax={isMax}
-                  isCheckedInterest={Boolean(findedInterestId)}
-                  onClickWithChecked={removeInterestIfinterestIsMatched}
-                  onClickWithUnchecked={() =>
-                    addInterest('recommended', interest)
-                  }
-                />
-              );
-            })}
+            <RecommandedInterests
+              isMax={isMax}
+              interests={currentInterestList}
+              addInterest={addInterest}
+              removeInterest={removeUserInterest}
+            />
           </Field.Box>
         </Field>
 
         <Field>
           <Field.Label>나만의 관심사를 추가해보세요! (최대 10개)</Field.Label>
-          {isError && (
-            <p className={styles.interest_error}>중복된 관심사 입니다.</p>
-          )}
           <Field.Box
             className={clsx(styles.field_box, styles.my_interest_field_box)}
           >
@@ -224,9 +205,7 @@ const AdditionalInfoPage = () => {
               <MyInterestField
                 key={field.id}
                 field={field}
-                checkList={currentInterestStringList}
                 onRemove={removeUserInterest}
-                changeError={changeError}
                 updateUserInterest={updateUserInterest}
               />
             ))}
diff --git a/src/app/(AuthLayout)/auth/info/types/info.ts b/src/app/(AuthLayout)/auth/info/types/info.ts
new file mode 100644
index 0000000..2d04890
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/info/types/info.ts
@@ -0,0 +1,6 @@
+export type UserInterestType = { id: string; interestName: string };
+export type UserSocialAccountType = { id: string; socialAccount: string };
+export type UserInterestsType = {
+  recommended: UserInterestType[];
+  user: UserInterestType[];
+};

From 73f5ac7e26cd50ae2b3cd5c79343074377a9bd7a Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Mon, 10 Feb 2025 17:09:34 +0900
Subject: [PATCH 15/18] [feat] split hooks with useUserInterests and
 useUserSocialAccount

---
 src/api/mutations/info.ts                     |  27 +++--
 .../auth/info/hooks/useUserInterest.ts        |  91 +++++++++++++++
 .../auth/info/hooks/useUserSocialAccount.ts   |  27 +++++
 src/app/(AuthLayout)/auth/info/page.tsx       | 108 +++---------------
 src/hooks/useInterestsServerRequests.ts       |   4 +-
 src/hooks/useSocialAccountsServerRequests.ts  |   8 +-
 src/utils/asyncLogic.ts                       |   5 +-
 src/utils/create.ts                           |   4 +-
 8 files changed, 160 insertions(+), 114 deletions(-)
 create mode 100644 src/app/(AuthLayout)/auth/info/hooks/useUserInterest.ts
 create mode 100644 src/app/(AuthLayout)/auth/info/hooks/useUserSocialAccount.ts

diff --git a/src/api/mutations/info.ts b/src/api/mutations/info.ts
index b05ceb5..0a80d62 100644
--- a/src/api/mutations/info.ts
+++ b/src/api/mutations/info.ts
@@ -7,8 +7,12 @@ import {
   removeSocialAccount,
 } from '../info';
 
+type CustomMutationOptionType<T> =
+  | UseMutationOptions<HttpSuccessType<unknown>, ResponseError, T>
+  | undefined;
+
 const useAddSocialAccountMutation = (
-  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
+  options: CustomMutationOptionType<string> = {},
 ) => {
   return useMutation({
     mutationFn: postSocialAccount,
@@ -17,7 +21,7 @@ const useAddSocialAccountMutation = (
 };
 
 const useRemoveSocialAccountMutation = (
-  options: UseMutationOptions<HttpSuccessType<unknown>, ResponseError, string>,
+  options: CustomMutationOptionType<string> = {},
 ) => {
   return useMutation({
     mutationFn: removeSocialAccount,
@@ -26,11 +30,10 @@ const useRemoveSocialAccountMutation = (
 };
 
 const useAddInterest = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { userId: number; interestName: string }
-  >,
+  options: CustomMutationOptionType<{
+    userId: number;
+    interestName: string;
+  }> = {},
 ) => {
   return useMutation({
     mutationFn: postInterest,
@@ -39,11 +42,11 @@ const useAddInterest = (
 };
 
 const useRemoveInterest = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { userId: number; hashTagId: number; name: string }
-  >,
+  options: CustomMutationOptionType<{
+    userId: number;
+    hashTagId: number;
+    name: string;
+  }> = {},
 ) => {
   return useMutation({
     mutationFn: removeInterest,
diff --git a/src/app/(AuthLayout)/auth/info/hooks/useUserInterest.ts b/src/app/(AuthLayout)/auth/info/hooks/useUserInterest.ts
new file mode 100644
index 0000000..b756967
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/info/hooks/useUserInterest.ts
@@ -0,0 +1,91 @@
+import { useCallback, useMemo, useState } from 'react';
+
+import { generateId } from '@/utils/create';
+import { UserInterestType, UserInterestsType } from '../types/info';
+
+const MY_INTERESTS_FIELDS_LIMIT = 10;
+
+const useUserInterest = () => {
+  const [userInterests, setUserInterests] = useState<UserInterestsType>({
+    recommended: [],
+    user: [],
+  });
+
+  const currentInterestList = useMemo(
+    () => [...userInterests.user, ...userInterests.recommended],
+    [userInterests],
+  );
+
+  const currentInterestStringList = useMemo(
+    () => [
+      ...new Set([
+        ...userInterests.user.map(({ interestName }) => interestName),
+        ...userInterests.recommended.map(({ interestName }) => interestName),
+      ]),
+    ],
+    [userInterests],
+  );
+
+  const isMaxInterestCount =
+    currentInterestStringList.length >= MY_INTERESTS_FIELDS_LIMIT;
+
+  const addInterest = useCallback(
+    (type: 'user' | 'recommended', interestName?: string) => {
+      if (isMaxInterestCount) return;
+
+      const newInterest = {
+        id: generateId(),
+        interestName: interestName ?? '',
+      };
+
+      setUserInterests((prev) => ({
+        ...prev,
+        [type]: [...prev[type], newInterest],
+      }));
+    },
+    [isMaxInterestCount],
+  );
+
+  const removeUserInterest = useCallback((removeTargetId: string) => {
+    setUserInterests(({ recommended, user }) => ({
+      recommended: recommended.filter(({ id }) => id !== removeTargetId),
+      user: user.filter(({ id }) => id !== removeTargetId),
+    }));
+  }, []);
+
+  const updateUserInterest = useCallback((field: UserInterestType) => {
+    const newUserInterests: UserInterestType[] = [];
+
+    setUserInterests(({ recommended, user }) => ({
+      recommended,
+      user: user.reduce((acc, cur) => {
+        if (cur.id === field.id) {
+          const duplicateInterests = acc.filter(
+            (target) => target.interestName === cur.interestName,
+          ).length;
+          if (duplicateInterests > 0) {
+            return acc;
+          }
+
+          acc.push(field);
+          return acc;
+        }
+
+        acc.push(cur);
+        return acc;
+      }, newUserInterests),
+    }));
+  }, []);
+
+  return {
+    userInterests,
+    currentInterestList,
+    currentInterestStringList,
+    isMaxInterestCount,
+    addInterest,
+    removeUserInterest,
+    updateUserInterest,
+  };
+};
+
+export default useUserInterest;
diff --git a/src/app/(AuthLayout)/auth/info/hooks/useUserSocialAccount.ts b/src/app/(AuthLayout)/auth/info/hooks/useUserSocialAccount.ts
new file mode 100644
index 0000000..30c2e1d
--- /dev/null
+++ b/src/app/(AuthLayout)/auth/info/hooks/useUserSocialAccount.ts
@@ -0,0 +1,27 @@
+import { useCallback, useState } from 'react';
+
+import { generateId } from '@/utils/create';
+import { UserSocialAccountType } from '../types/info';
+
+const useUserSocialAccount = () => {
+  const [userSocialAccounts, setUserSocialAccounts] = useState<
+    UserSocialAccountType[]
+  >([{ id: generateId(), socialAccount: '' }]);
+
+  const addUserSocialAccount = useCallback(() => {
+    setUserSocialAccounts((prev) => [
+      ...prev,
+      { id: generateId(), socialAccount: '' },
+    ]);
+  }, []);
+
+  const removeUserSocialAccount = useCallback((removeTargetId: string) => {
+    setUserSocialAccounts((prev) =>
+      prev.filter(({ id }) => id !== removeTargetId),
+    );
+  }, []);
+
+  return { userSocialAccounts, addUserSocialAccount, removeUserSocialAccount };
+};
+
+export default useUserSocialAccount;
diff --git a/src/app/(AuthLayout)/auth/info/page.tsx b/src/app/(AuthLayout)/auth/info/page.tsx
index 88a2946..2a35043 100644
--- a/src/app/(AuthLayout)/auth/info/page.tsx
+++ b/src/app/(AuthLayout)/auth/info/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import clsx from 'clsx';
-import { FormEvent, useMemo, useState } from 'react';
+import { FormEvent } from 'react';
 import { useRouter } from 'next/navigation';
 
 import Logo from '@/components/common/Logo';
@@ -13,21 +13,15 @@ import useInterestsServerRequests from '@/hooks/useInterestsServerRequests';
 import useSocialAccountsServerRequest from '@/hooks/useSocialAccountsServerRequests';
 
 import PlusIcon from '@/assets/icons/plus.svg';
-import {
-  UserInterestType,
-  UserInterestsType,
-  UserSocialAccountType,
-} from './types/info';
 import AdditionalLink from './components/AdditionalLink';
 import MyInterestField from './components/MyInterestField';
 import RecommandedInterests from './components/RecommededInterests';
+import useUserInterest from './hooks/useUserInterest';
+import useUserSocialAccount from './hooks/useUserSocialAccount';
 
 import styles from './page.module.scss';
 
 const LINK_FIELDS_LIMIT = 3;
-const MY_INTERESTS_FIELDS_LIMIT = 10;
-
-const generateId = () => Date.now().toLocaleString();
 
 const AdditionalInfoPage = () => {
   const router = useRouter();
@@ -35,89 +29,17 @@ const AdditionalInfoPage = () => {
   const { requestSaveSocialAccounts } = useSocialAccountsServerRequest();
   const { requestSaveInterest } = useInterestsServerRequests();
 
-  const [userSocialAccounts, setUserSocialAccounts] = useState<
-    UserSocialAccountType[]
-  >([{ id: generateId(), socialAccount: '' }]);
-
-  const [userInterests, setUserInterests] = useState<UserInterestsType>({
-    recommended: [],
-    user: [],
-  });
-
-  const currentInterestList = useMemo(
-    () => [...userInterests.user, ...userInterests.recommended],
-    [userInterests],
-  );
-
-  const currentInterestStringList = useMemo(
-    () => [
-      ...new Set([
-        ...userInterests.user.map(({ interestName }) => interestName),
-        ...userInterests.recommended.map(({ interestName }) => interestName),
-      ]),
-    ],
-    [userInterests],
-  );
-
-  const isMax = currentInterestStringList.length >= MY_INTERESTS_FIELDS_LIMIT;
+  const {
+    userInterests,
+    currentInterestList,
+    isMaxInterestCount,
+    addInterest,
+    removeUserInterest,
+    updateUserInterest,
+  } = useUserInterest();
 
-  const addUserSocialAccount = () => {
-    setUserSocialAccounts((prev) => [
-      ...prev,
-      { id: generateId(), socialAccount: '' },
-    ]);
-  };
-
-  const removeUserSocialAccount = (removeTargetId: string) => {
-    setUserSocialAccounts((prev) =>
-      prev.filter(({ id }) => id !== removeTargetId),
-    );
-  };
-
-  const addInterest = (type: 'user' | 'recommended', interestName?: string) => {
-    if (isMax) return;
-
-    const newInterest = {
-      id: generateId(),
-      interestName: interestName ?? '',
-    };
-
-    setUserInterests((prev) => ({
-      ...prev,
-      [type]: [...prev[type], newInterest],
-    }));
-  };
-
-  const removeUserInterest = (removeTargetId: string) => {
-    setUserInterests(({ recommended, user }) => ({
-      recommended: recommended.filter(({ id }) => id !== removeTargetId),
-      user: user.filter(({ id }) => id !== removeTargetId),
-    }));
-  };
-
-  const updateUserInterest = (field: UserInterestType) => {
-    const newUserInterests: UserInterestType[] = [];
-
-    setUserInterests(({ recommended, user }) => ({
-      recommended,
-      user: user.reduce((acc, cur) => {
-        if (cur.id === field.id) {
-          const duplicateInterests = acc.filter(
-            (target) => target.interestName === cur.interestName,
-          ).length;
-          if (duplicateInterests > 0) {
-            return acc;
-          }
-
-          acc.push(field);
-          return acc;
-        }
-
-        acc.push(cur);
-        return acc;
-      }, newUserInterests),
-    }));
-  };
+  const { userSocialAccounts, addUserSocialAccount, removeUserSocialAccount } =
+    useUserSocialAccount();
 
   const submitHandler = async (e: FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -188,7 +110,7 @@ const AdditionalInfoPage = () => {
             className={clsx(styles.field_box, styles.interest_field_box)}
           >
             <RecommandedInterests
-              isMax={isMax}
+              isMax={isMaxInterestCount}
               interests={currentInterestList}
               addInterest={addInterest}
               removeInterest={removeUserInterest}
@@ -210,7 +132,7 @@ const AdditionalInfoPage = () => {
               />
             ))}
 
-            {isMax === false && (
+            {isMaxInterestCount === false && (
               <Button
                 type="button"
                 fill="white"
diff --git a/src/hooks/useInterestsServerRequests.ts b/src/hooks/useInterestsServerRequests.ts
index 64a3f81..548db45 100644
--- a/src/hooks/useInterestsServerRequests.ts
+++ b/src/hooks/useInterestsServerRequests.ts
@@ -34,7 +34,7 @@ const useInterestsServerRequests = () => {
     try {
       await requestPromiseAll<InterestWithUserIdType>(
         targetInterests,
-        async ({ userId: interestUserId, interestName }) =>
+        ({ userId: interestUserId, interestName }) =>
           saveInterest(
             { userId: interestUserId, interestName },
             {
@@ -62,7 +62,7 @@ const useInterestsServerRequests = () => {
 
         await requestPromiseAll<InterestWithUserIdType>(
           successfulIntersetRequests,
-          async ({ userId: interestUserId, interestName }) => {
+          ({ userId: interestUserId, interestName }) => {
             const hashTagId = interests.find(
               ({ hashTagName }) => interestName === hashTagName,
             )?.hashTagId;
diff --git a/src/hooks/useSocialAccountsServerRequests.ts b/src/hooks/useSocialAccountsServerRequests.ts
index 7a18fc4..c64b3aa 100644
--- a/src/hooks/useSocialAccountsServerRequests.ts
+++ b/src/hooks/useSocialAccountsServerRequests.ts
@@ -14,8 +14,8 @@ type RequestSaveInterestType = {
 };
 
 const useSocialAccountsServerRequest = () => {
-  const { mutate: saveSocialAccount } = useAddSocialAccountMutation({});
-  const { mutate: removeSocialAccount } = useRemoveSocialAccountMutation({});
+  const { mutate: saveSocialAccount } = useAddSocialAccountMutation();
+  const { mutate: removeSocialAccount } = useRemoveSocialAccountMutation();
   const { addToast } = useToastContext();
 
   const requestSaveSocialAccounts = async ({
@@ -29,7 +29,7 @@ const useSocialAccountsServerRequest = () => {
     try {
       await requestPromiseAll<string>(
         targetSocialAccounts,
-        async (socialAccount: string) =>
+        (socialAccount: string) =>
           saveSocialAccount(socialAccount, {
             onSuccess: () => {
               successfulSocialRequests.push(socialAccount);
@@ -50,7 +50,7 @@ const useSocialAccountsServerRequest = () => {
     } catch (error) {
       await requestPromiseAll<string>(
         successfulSocialRequests,
-        async (socialAccount) => {
+        (socialAccount) => {
           removeSocialAccount(socialAccount);
         },
       );
diff --git a/src/utils/asyncLogic.ts b/src/utils/asyncLogic.ts
index 7f901d5..af351fb 100644
--- a/src/utils/asyncLogic.ts
+++ b/src/utils/asyncLogic.ts
@@ -1,8 +1,9 @@
 const requestPromiseAll = async <T>(
   arr: T[],
-  callback: (params: T, index: number, array: T[]) => Promise<unknown>,
+  callback: (params: T, index: number, array: T[]) => unknown,
 ) => {
-  return Promise.all(arr.map(callback));
+  const result = await Promise.all(arr.map(callback));
+  return result;
 };
 
 export { requestPromiseAll };
diff --git a/src/utils/create.ts b/src/utils/create.ts
index 8f002dc..96c84e7 100644
--- a/src/utils/create.ts
+++ b/src/utils/create.ts
@@ -1,3 +1,5 @@
 const createUniqueId = () => `${Date.now() - Math.random()}`;
 
-export { createUniqueId };
+const generateId = () => Date.now().toLocaleString();
+
+export { createUniqueId, generateId };

From 37512e8b24e5a19ae5bc06b57f5492fa223d49a7 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Mon, 10 Feb 2025 17:11:17 +0900
Subject: [PATCH 16/18] [refact] remove unnecessary empty object

---
 src/hooks/useInterestsServerRequests.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useInterestsServerRequests.ts b/src/hooks/useInterestsServerRequests.ts
index 548db45..e4e6d2e 100644
--- a/src/hooks/useInterestsServerRequests.ts
+++ b/src/hooks/useInterestsServerRequests.ts
@@ -18,8 +18,8 @@ type RequestSaveInterestType = {
 };
 
 const useInterestsServerRequests = () => {
-  const { mutate: saveInterest } = useAddInterest({});
-  const { mutate: removeInterest } = useRemoveInterest({});
+  const { mutate: saveInterest } = useAddInterest();
+  const { mutate: removeInterest } = useRemoveInterest();
   const { addToast } = useToastContext();
 
   const requestSaveInterest = async ({

From 7d6dd4e87ca31615bc51c7f80ee538cdfe15adf0 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Mon, 10 Feb 2025 17:37:43 +0900
Subject: [PATCH 17/18] [feat] update profile page logic

---
 src/api/{my.ts => profile.ts}                |  0
 src/app/profile/components/MyLink/MyLink.tsx |  2 +-
 src/app/profile/layout.tsx                   | 21 +++++++++++++++-----
 src/hooks/useInterestsServerRequests.ts      |  2 +-
 4 files changed, 18 insertions(+), 7 deletions(-)
 rename src/api/{my.ts => profile.ts} (100%)

diff --git a/src/api/my.ts b/src/api/profile.ts
similarity index 100%
rename from src/api/my.ts
rename to src/api/profile.ts
diff --git a/src/app/profile/components/MyLink/MyLink.tsx b/src/app/profile/components/MyLink/MyLink.tsx
index 6b12744..322f4eb 100644
--- a/src/app/profile/components/MyLink/MyLink.tsx
+++ b/src/app/profile/components/MyLink/MyLink.tsx
@@ -2,7 +2,7 @@
 
 import { ChangeEvent, useState } from 'react';
 
-import { updateMyLinks } from '@/api/my';
+import { updateMyLinks } from '@/api/profile';
 import If from '@/components/common/If';
 import Button from '@/components/common/Button';
 import EditMyLinkList from './EditMyLinkList';
diff --git a/src/app/profile/layout.tsx b/src/app/profile/layout.tsx
index fb1b92c..e7e204a 100644
--- a/src/app/profile/layout.tsx
+++ b/src/app/profile/layout.tsx
@@ -1,5 +1,8 @@
-import { ReactNode } from 'react';
+'use client';
 
+import { ReactNode, useEffect, useState } from 'react';
+
+import { getProfile } from '@/api/profile';
 import { UserType } from './types/my';
 import Mypage from './components/Mypage';
 
@@ -9,13 +12,21 @@ interface MypageLayoutProps {
   children?: ReactNode;
 }
 
-const MypageLayout = async ({ children }: MypageLayoutProps) => {
-  const result = await fetch('http://localhost:3000/mock/user.json');
-  const userData = (await result.json()) as { data: UserType };
+const MypageLayout = ({ children }: MypageLayoutProps) => {
+  const [userData, setUserData] = useState<UserType | undefined>();
+
+  useEffect(() => {
+    (async function () {
+      const response = await getProfile();
+      if (response.isSuccess) {
+        setUserData(response.result);
+      }
+    })();
+  }, []);
 
   return (
     <div className={styles.container}>
-      <Mypage myData={userData.data}>{children}</Mypage>
+      {userData && <Mypage myData={userData}>{children}</Mypage>}
     </div>
   );
 };
diff --git a/src/hooks/useInterestsServerRequests.ts b/src/hooks/useInterestsServerRequests.ts
index e4e6d2e..4a0717c 100644
--- a/src/hooks/useInterestsServerRequests.ts
+++ b/src/hooks/useInterestsServerRequests.ts
@@ -1,4 +1,4 @@
-import { getProfile } from '@/api/my';
+import { getProfile } from '@/api/profile';
 import { useAddInterest, useRemoveInterest } from '@/api/mutations/info';
 import { getUserId } from '@/utils/manageToken';
 import { requestPromiseAll } from '@/utils/asyncLogic';

From 2b3c3a653da49ea7e796c3136cb07da73a5d78a4 Mon Sep 17 00:00:00 2001
From: seongjin2427 <seongjin2427@gmail.com>
Date: Mon, 10 Feb 2025 17:56:58 +0900
Subject: [PATCH 18/18] [feat] add Suspense at MainLayout Component to resolve
 deploy error in netlify

---
 src/app/(MainLayout)/layout.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/app/(MainLayout)/layout.tsx b/src/app/(MainLayout)/layout.tsx
index dab9890..78ced21 100644
--- a/src/app/(MainLayout)/layout.tsx
+++ b/src/app/(MainLayout)/layout.tsx
@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactNode, Suspense } from 'react';
 import Wrapper from './components/Wrapper/Wrapper';
 import Navigation from './components/Navigation/Navigation';
 
@@ -9,8 +9,10 @@ interface MainLayoutProps {
 const MainLayout = ({ children }: MainLayoutProps) => {
   return (
     <Wrapper>
-      <Navigation />
-      {children}
+      <Suspense>
+        <Navigation />
+        {children}
+      </Suspense>
     </Wrapper>
   );
 };