[전공자들 8] 7일차 - 로그인 /회원가입/비밀번호 재설정 화면

메인 페이지들을 끝내고 드디어 비중낮은 로그인/회원가입/비밀번호 재설정 페이지만 남아서 쉽게 생각했는데 막상 시작해보니 절대 쉽지않았다.. 

 

UI 구성은 심플하게 빨리 끝냈는데 여러 조건설정때문에 애를 먹었다.

 

특히 회원가입 화면에서는

이메일과 비밀번호에는 각각 형식 검증을, 이메일형식이 맞았을 때 인증번호 화면 출력과 인증번호가 맞았는지 검증, 

그리고 비밀번호도 사용자 경험을 위해 비밀번호 재입력하는 과정을 거쳐야 하다보니 

코드가 복잡해지고 많은 변수가 필요해졌다. 

 

단계별 진행이 아니라 한 화면에 모든 입력을 받고 뭔가 실시간으로 즉시 체크되는 것처럼 화면을 만들고 싶어서 

더 복잡해졌던 것 같다. 

 

게다가 혹시나 인증을 받고 이메일을 수정하면 어떻게 되는거지?  

비밀번호 재입력을 통과한 다음 원래 비밀번호를 바꾸면 어떻게 되는거지? 하는 생각에

그런 변수까지 일일이 if문으로 걸러주는 작업을 하는 방법밖에 모르겠어서 그냥 다 때려박아버렸다.. 

만들고 보니 동작은 하는데 코드가 지저분해 보여서 뭔가 실무에서 직접 쓰는 코드를 한번 보고싶기도 하다..

 

 

 

---

 

그래서 비밀번호 재설정 페이지를 만들 땐 동작을 끊어서 만들어 봤다.

인증을 한 후에 바로 화면을 바꿔서 다시 수정할 수 없도록 state라는 상태변수를 만들어서 한 컴포넌트 안에 4개의 화면이 렌더링되는 것처럼 만들었다. 

 

1. state=='A' : 이메일 입력

 {state === 'A' &&
          <div className='container'>
              <h1 className='h1'>비밀번호 재설정</h1>
              <Link to='/main' className='to-main'>메인으로</Link>
            <input className={`input ${isPassTest ? '' : 'red'}`} placeholder='이메일을 입력해주세요' onChange={changeEmail} />
            {
              onEmailMessage &&
              <p className='message-f'>존재하지 않는 이메일입니다.</p>
            }
            {onBtn ?
              <input type='button' className='submit-btn on' onClick={nextToB} value='인증번호 전송' />
              :
              <input type='button' disabled className='submit-btn' value='인증번호 전송' />
            }
          </div>
        }

 

이메일 입력이 될때마다 그 값을 확인해서 애초에 옳은 형식의 이메일이 아니면 인증번호 전송 버튼을 off시켜버렸다.

그리고 옳은 이메일을 입력하면 그러한 이메일이 유저목록에 존재하는지를 확인한 후, 있다면 이메일 인증 state로 넘어가도록 만들었다.

 

 

2. state=='B' : 이메일 인증

 {state === 'B' &&
          <div className='container'>
            <p className='h2'>{email}<br />으로 전송된 인증번호를 입력해주세요.</p>
            <p className='h3'>인증번호 재전송하기</p>
            <input className={`input ${isPassTest ? '' : 'red'}`} placeholder='인증번호를 입력해주세요' onChange={(e) => { setAuthNum(e.target.value) }} />
            {
              onAuthMessage &&
              <p className='message-f'>인증번호가 틀렸습니다.</p>
            }
            <input type='button' className='submit-btn on' onClick={nextToC} value='확인' />
          </div>
        }

 

인증번호를 확인 후 맞으면 다음 state로 넘어가기

 

 

3. state=='C' : 비밀번호 재설정

{
          state === 'C' &&
          <div className='container'>
            <p className='h2'>이메일 인증에 성공하셨습니다.</p>
            <p className='h4'>비밀번호를 재설정해주세요.</p>
            <input className='input' type='password' minLength={8} maxLength={16} placeholder='8~16자리 비밀번호 입력' onChange={checkPassword} />
          {passwordForm &&
            <p className='message-f'>8~16자이내, 대소문자와 숫자를 1개 이상 포함해주세요</p>
          }
          <input className='input' type='password' placeholder='비밀번호 확인' onChange={checkDoublePassword} />
          {passPassword === true &&
            <p className='message-t'>비밀번호가 일치합니다</p>
          }
          {passPassword === false &&
            <p className='message-f'>비밀번호가 일치하지 않습니다</p>
          }{
            onPwBtn?
            <input type='button' className='submit-btn on' onClick={nextToLast} value='변경' />
            :
            <input type='button' disabled className='submit-btn' onClick={nextToLast} value='변경' /> 
          }

 

 

혹시나 정석적인 흐름대로 가지 않고 장난치려고 하면 다시 버튼을 off시킬 수 있도록 했다.

 

 

3. state=='Last' : 완료화면

 { state==='Last' &&
          <div className='container'>
            <p className='h2'>비밀번호 변경에 성공했습니다</p>
            <p className='h4'>다시 로그인해주세요</p>
            <Link to='/login' className='login-btn'>로그인</Link>
            <Link to='/main'className='main-btn'>메인으로</Link>
          </div>

        }

 

 

비밀번호 변경 페이지 전체 흐름 영상

 

 

 

내일부터는 백엔드 시작~!!~!

화면도 실제 개발은 딱 일주일 걸리긴 했는데 개발을 못한 날도 있어서 일정이 지체되고 있다 ㅜ-ㅜ 내일부터는 열심히 달려서 남은 3주 안에 끝낼 수 있도록 해야지