Portfolio


const [email, setEmail] = useState<string>('');
const [password, setPassword] = useState<string>('');
const [errorCatched, setErrorCatched] = useState<boolean>(false);
const setUser = useSetRecoilState(userState);
const navigate = useNavigate();
let timer = 0;


<Logo />
<LoginForm>
	<UserInput name='email'/>
	<UserInput name='password'/>
	<Button label='로그인'/>
	<GoToSignUp /> // 회원가입 페이지로 이동합니다
</LoginForm>


<LoginContainer>
  <LogoContainer>
    <Logo />
  </LogoContainer>

  <LoginForm onSubmit={handleSubmit}>
    <UserInput
      name={USER_INPUT.EMAIL.NAME}
      placeholder={USER_INPUT.EMAIL.PLACE_HOLDER}
      title={USER_INPUT.EMAIL.TITLE}
      handleChange={handleInputChange}
      show={errorCatched}
      errorMessage={USER_INPUT.ERROR_MESSAGE}
    />
    <UserInput
      name={USER_INPUT.PASSWORD.NAME}
      placeholder={USER_INPUT.PASSWORD.PLACE_HOLDER}
      title={USER_INPUT.PASSWORD.TITLE}
      handleChange={handleInputChange}
      type={USER_INPUT.PASSWORD.TYPE}
    />
    <ButtonContainer>
      <Button
        label='로그인'
        width={300}
        height={45}
        bold={false}
        dark={true}
        handleClick={() => handleSubmit}
      />
    </ButtonContainer>
    <GoToSignUp />
  </LoginForm>
</LoginContainer>


const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  event.preventDefault();
  const { name, value } = event.target;

  if (timer) { // 디바운싱을 위한 로직 
    clearTimeout(timer);
  }
  timer = setTimeout(() => {
    switch (name) {
      case USER_INPUT.EMAIL.NAME: // email type 일 경우 email 상태 변경
        setEmail(value);
        break;
      case USER_INPUT.PASSWORD.NAME:
        setPassword(value); // password type 일 경우 상태 변경
        break;
      default:
        break;
    }
  }, 200); // 0.2s 마다 마지막 이벤트만 실행합니다
};


const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  event.preventDefault();
  postLogInUser({ email, password })
    .then((res) => {
      const { user, token } = res.data;
      setUser({ ...user, token });
      navigate('/meditation');
    })
    .catch((err) => {
      console.log(err);
      setErrorCatched(true);
    });

  return;
};

Login 페이지

선언

렌더링

UserInput 이벤트 핸들러

Button 이벤트 핸들러