2022-05-30 역할분담, 레이아웃 작업, form 구현

로그인 페이지 layout

기업에서 준 스토리보드와 요구사항을 숙지하고 드리블 사이트를 참고하여 레이아웃을 잡았습니다.

이전 과제에서 form을 다룰때에는 formik을 사용했었는데 다른 라이브러리를 찾던 중 react-hook-form을 알게되었습니다.

formik 비교했을 때 useForm은

1. 훨씬 적은 코드를 제공

2. 매우 적은 용량

3. 최소한의 re-rendering을 제공

위와 같은 장점을 갖고 있기 때문에, formik보다는 react-hook-form을 사용하기로 했습니다.

<form onSubmit={handleSubmit(onSubmit)}>
          <input
            id="id"
            placeholder="ID"
            {...register('id', {
              required: true,
            })}
          />

          {errors.id?.type === 'required' && <span>필수 입력 항목입니다.</span>}

          <div className={styles.inputWrap}>
            <input
              id="pw"
              type={isVisible ? 'text' : 'password'}
              placeholder="PASSWORD"
              {...register('pw', {
                required: true,
                minLength: { value: 5, message: '최소 5글자 입력해주세요' },
              })}
            />
            {isVisible ? (
              <VisibilityOnIcon
                className={styles.icon}
                onClick={handleVisible}
              />
            ) : (
              <VisibilityOffIcon
                className={styles.icon}
                onClick={handleVisible}
              />
            )}
          </div>
          {errors.pw?.type === 'required' && <span>필수 입력 항목입니다.</span>}
          {errors.pw?.message && <span>{errors.pw?.message}</span>}
          <Button size="long" type="submit" className={styles.loginButton}>
            Login
          </Button>
        </form>

2022-05-31 로그인 에러메시지 및 예외처리 구현

각 ID, PW input 아래에 생성 될 에러메시지는 useForm의 requird, minLength, message, errors를 이용해서 쉽게 구현했습니다. 또한 애니메이션 처리된 메시지를 적절한 위치에 생성하면 가산점이 주어진다고 하여 이 부분도 구현하였습니다. input 아래에 생성 될 에러메시지와 다른 의미를 가진 메시지를 생성해야한다고 생각했습니다. 그래서 이부분은 로그인 실패/성공에 관한 메시지를 띄우기로 하여 [’존재하지 않는 아이디입니다.’, '일치하지 않는 패스워드입니다.’] 와 같은 두 문구를 상황에 맞게 띄우기로 했습니다.