Beomlog - RegisterPage

일단 db를 연결시켜 놓았다. db에 userData를 저장하려 하는데, 이를 signup 하면서 동시에 진행하려고 한다. 이를 Modules/firebase.ts 에서 진행하도록 하겠다.

 

onSubmit이벤트는 다음과 같이 구현했다. 일단 values라는 state에는 name, email, password, checkPassword가 들어있다. validity를 판단해보고, valid하면 signUp으로 올린다. 만약 valid하지 않다면, name과 email은 그대로 둔 채 패스워드와 checkPassword만 초기화 시킨다.

onChange는 다음과 같이 구현하였다.

values가 바뀔때마다 setValues를 통해 바뀐 부분을 수정해준다. 그러고 password와 checkPassword가 같은지 판단한 후, 같으면 setMatchPassword를 true로 두고, 아니면 false로 둔다.

 

아, 그리고 event.target.type이었던 것을 event.target.id로 바꿔서, 각 input에 id를 추가하는 방식으로 바뀌었더니 훨씬 깔끔하고 알아보기 쉽게 돌아간다. Input 컴포넌트가 따라서 다음같이 바뀌었다.

 

 

그 후, firebase는 다음과 같이 구현해 줬다. 먼저 firebase signup할때, createUserData 라는 함수도 동시에 실행시켜 signUp 자체가 하나의 promise로 구현되도록 해 놓았다.

그 후, 모두 적용하고 회원가입을 해보면,

 

짠 구현이 완료되었다. imgUrl은 프로필 사진 url로 넣은 것인데 아직 프로필 사진 업로드 기능을 추가하지 않았기 때문에 dummy URL로 아무 사진 (SKT 에포트 선수 사진)으로 해놓았다.

이로써 RegisterPage도 구현 완료!