응집도와 결합도를 고려한 회원가입 설계와 유저가 지치지 않는 UI

src > pages > signup > index;
 
const SignUpPage = () => {
  const [applyValues, setApplyValues] = useState<Partial<ApplyValues>>({
    step: 0,
  });
 
  const handlePhoneNumber = (phoneNumber: ApplyValues['memberPhone']) => {
    setApplyValues((prev) => ({
      ...prev,
      memberPhone: phoneNumber,
      step: (prev.step as number) + 1,
    }));
  };
 
  const handleNameAndEmail = (name: ApplyValues['memberName'], email: ApplyValues['password']) => {
    setApplyValues((prev) => ({
      ...prev,
      memberName: name,
      email: email,
      step: (prev.step as number) + 1,
    }));
  };
 
  const handleRemainData = (
    password: ApplyValues['password'],
    job: ApplyValues['memberJob'],
    smsAgree: ApplyValues['memberSmsAgree']
  ) => {
    setApplyValues((prev) => ({
      ...prev,
      password: password,
      memberJob: job,
      memberSmsAgree: smsAgree,
      step: (prev.step as number) + 1,
    }));
  };
 
  useEffect(() => {
    if (applyValues.step === 3) {
      signUpReq({
        email: applyValues.email as string,
        password: applyValues.password as string,
        memberName: applyValues.memberName as string,
        memberJob: applyValues.memberJob as string,
        memberPhone: applyValues.memberPhone as string,
        memberSmsAgree: applyValues.memberSmsAgree as boolean,
      });
    }
  }, [applyValues, signUpReq]);
 
  return (
    <MainContainer>
      {applyValues.step === 0 ? <PhoneCertification onNext={handlePhoneNumber} /> : null}
      {applyValues.step === 1 ? <EmailVerification onNext={handleNameAndEmail} /> : null}
      {applyValues.step === 2 ? (
        <PasswordVerification onNext={handleRemainData} applyValues={applyValues} />
      ) : null}
      {applyValues.step === 4 ? <SignupDone /> : null}
    </MainContainer>
  );
};
 
export default SignUpPage;

const [step, setStep] = useState(0);
const [memberPhone, setMemberPhone] = useState('');
const [memberName, setMemberName] = useState('');
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [memberJob, setMemberJob] = useState('');
const [memberSmsAgree, setMemberSmsAgree] = useState(false);
 
// 각 상태를 업데이트할 때마다 여러 set 함수 호출 필요
setMemberPhone(phone);
setStep(step + 1);

const [applyValues, setApplyValues] = useState < Partial < ApplyValues >> { step: 0 };
 
// 한 번의 set 함수 호출로 여러 값을 업데이트 가능
setApplyValues((prev) => ({
  ...prev,
  memberPhone: phone,
  step: prev.step + 1,
}));

export interface ISignIn {
  email: string;
  password: string;
}
 
export interface ISignUp extends ISignIn {
  memberName: string;
  memberJob: string;
  memberPhone: string;
  memberSmsAgree: boolean;
}
 
export interface ApplyValues extends ISignUp {
  step: number;
}