2. 회원가입

SignupPage.tsx

export default function SignupPage() {
  const navigate = useNavigate();

  const [{ accessToken }, store] = useSignupFormStore();

  useEffect(() => {
    store.reset();
  }, []);

  useEffect(() => {
    if (accessToken) {
      store.reset();
      navigate("/signup/complete");
    }
  }, [accessToken]);

  return <SignupForm />;
}

SignupForm.tsx

export default function SignupForm() {
  const { setAccessToken } = useAccessToken();

  const [
    { email, name, password, passwordConfirmation, valid, error, accessToken },
    store,
  ] = useSignupFormStore();

  useEffect(() => {
    if (accessToken) {
      setAccessToken(accessToken);
    }
  }, [accessToken]);

  const handleChangeEmail = (value: string) => {
    store.changeEmail(value);
  };

  const handleChangeName = (value: string) => {
    store.changeName(value);
  };

  const handleChangePassword = (value: string) => {
    store.changePassword(value);
  };

  const handleChangePasswordConfirmation = (value: string) => {
    store.changePasswordConfirmation(value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    store.signup();
  };

  return (
    <Container>
      <h2>회원 가입</h2>
      <form onSubmit={handleSubmit}>
        <TextBox
          label="E-mail"
          placeholder="[e-mail]"
          value={email}
          onChange={handleChangeEmail}
        />
        <TextBox label="Name" value={name} onChange={handleChangeName} />
        <TextBox
          label="Password"
          type="password"
          value={password}
          onChange={handleChangePassword}
        />
        <TextBox
          label="Password Confirmation"
          type="password"
          value={passwordConfirmation}
          onChange={handleChangePasswordConfirmation}
        />
        <Button type="submit" disabled={!valid}>
          회원 가입
        </Button>
        {error && <p>회원 가입 실패</p>}
      </form>
    </Container>
  );
}

accessToken을 useEffect가 바라보고 있어

SignupForm 컴포넌트에서 회원 가입이 이뤄지면

accessToken이 생성되고 그렇다면 다시 SignupPage의 useEffect에서 complete 페이지로 보낸다.

너무나 깔끔, 간단 명료, 효율적인 모습이다.