[feat] 로그인/회원가입 피드백 적용

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;

src/api/mutations/info.ts

@@ -7,12 +7,12 @@ import {
   removeSocialAccount,
 } from '../info';
 
+type CustomMutationOptionType<T> =
+  | UseMutationOptions<HttpSuccessType<unknown>, ResponseError, T>
+  | undefined;
+
 const useAddSocialAccountMutation = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { socialAccountUrl: string }
-  >,
+  options: CustomMutationOptionType<string> = {},
 ) => {
   return useMutation({
     mutationFn: postSocialAccount,
@@ -21,11 +21,7 @@ const useAddSocialAccountMutation = (
 };
 
 const useRemoveSocialAccountMutation = (
-  options: UseMutationOptions<
-    HttpSuccessType<unknown>,
-    ResponseError,
-    { socialAccountUrl: string }
-  >,
+  options: CustomMutationOptionType<string> = {},
 ) => {
   return useMutation({
     mutationFn: removeSocialAccount,
@@ -34,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,
@@ -47,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,

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) => {
@@ -118,7 +118,7 @@ const GithubSignupPage = () => {
 
   return (
     <div className={styles.container}>
-      <Logo />
+      <Logo isGoHome={false} />
 
       <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
         <div>
@@ -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}

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`)}
     />
   );
 };

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>
   );
 };
 

src/app/(AuthLayout)/auth/info/components/MyInterestField/MyInterestField.tsx

@@ -3,94 +3,79 @@
 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;
-  checkList: string[];
-  onRemove: (index: number) => void;
+  field: UserInterestType;
+  onRemove: (id: string) => void;
+  updateUserInterest: (field: UserInterestType) => void;
 }
 
 const MyInterestField = ({
-  index,
-  checkList,
+  field,
   onRemove,
+  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 isDuplicate = () => {
-    if (word !== '' && checkList.includes(word)) {
-      noticeDuplicateError();
-      onRemove(index);
-      return true;
-    }
-    return false;
+  const updateInterest = () => {
+    updateUserInterest({ id: field.id, interestName: word });
+    setIsEditing(false);
   };
 
   const clickHandler = () => {
     if (!isEditing) {
-      onRemove(index);
+      onRemove(field.id);
     }
   };
 
   const keydownHandler = (e: KeyboardEvent<HTMLInputElement>) => {
     if (e.key !== ' ' && e.key !== 'Enter') return;
-    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>) => {
     const next = e.target.value.trim();
 
     if (REG_EXP.ONLY_ENG_NUM.test(next)) {
       setIsWord(() => next);
-      onChange(e);
     }
   };
 
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
   return (
     <button
       type="button"
@@ -102,14 +87,14 @@ const MyInterestField = ({
     >
       <input
         type={isEditing ? 'text' : 'hidden'}
+        ref={inputRef}
         value={word}
         className={styles.input}
         style={{ width: inputWidth }}
         maxLength={15}
         onChange={changeHandler}
         onBlur={blurHandler}
         onKeyDown={keydownHandler}
-        {...formProps}
         {...props}
       />
       {!isEditing && (