오늘은 비밀번호 재발급 부분을 구현했다.
그 중 정말 충격적인 부분도 있었고.. 트러블슈팅과 내일 팀원들과 얘기할 부분들을 정리해봐야겠다.
styled-component 에만 props 전달이 돼요..
정말정말정말 이마 탁 친 부분이다. 충격적이다.. 정말 내 실력이 미흡하구나 실감했다.....
구현하고 싶었던 것은,
인증코드에 값이 입력될 경우 확인 버튼이 활성화되며 css가 바뀌게끔 하고 싶었다.
그래서 도전했던 내 코드를 소개하겠다..
도전했는데 오류가 난다 ..?
1. useState 사용
우선 active 됐을 경우와 안 됐을 경우를 구분하기 위해 useState를 사용했다.
2. input 을 지켜보는 onChage 함수 넣기
3. onChage 함수 설정
만약 input 값의 길이가 0보다 클 경우, setActive(true), 그렇지 않을 경우 (false) 설정했다.
4. button 에게 isActive 라는 Props 주기 <<< 틀린 부분 !!!!
그리고 바꿔야 하는 button 에게 is Active를 줘서 css를 바꾸려고 시도했으나....
장렬하게 에러가 났다 ㅎㅎ...
많이 헤맸는데, 이유는 간단했다ㅠㅠㅠ
- Styled-Component 는 각각 하나의 컴포넌트를 만드는 것이다.
- so, styled-component 로 props 전달이 가능하다.
- 왜냐하면 props 는 컴포넌트끼리만 전달이 되기 때문이다 !!!!!!!!
- 내가 시도한 코드의 경우
- button 이라는 태그에게 props를 보내고 있다.
- 태그는 props 전달이 되지 않는다.....!!!!!!
- 같은 맥락에서... 밑줄친 'lowcase'로 전환하라는 이유도
- button 과 같은 태그의 event 들에게는 onClick 과 같은 첫 글자를 low로 설정해야 하기 땜누이다!
난 이런 식으로...
PwdCodeBox 라는 styled-component 안에 button { } 해서 css를 넣으면 props 전달이 잘 되는 줄 알았다.
그것은 다른 컴포넌트에 props를 줘놓고 그것을 인식하라는 말과 동일했다..
button에게 props를 주고 싶다면 ?
1. button을 따로 Styled-Component 를 줘서 button에게 props를 주기
2. button을 감싸고 있는 component 에게 props를 주기
이렇게 두 가지 방법이 있다 !!!
API 명세서 잘못봐서 생긴 오류
우리의 비밀번호 재설정 인증 메일 발송 부분의 api 명세서다.
기능을 전부 구현한 후, 실패시 나오는 alert 창을 구현하고자했다.
성공했을 경우 "이메일 전송 완료",
실패했을 경우 경우에 따라 alert창으 뜰 수 있도록 구현했다.
그런데 성공/실패시 둘다 null 값 혹은 undifined 값이 나오는 것이다 ..
이해할 수 없어서 머리를 싸맨 결과 ..
백엔드 분이 message 를 massage 로 쓰셨었다 ............
그래서 코드를 massage로 바꾸자 제대로 동작했다...........
api 명세서를 제대로 확인해야겠다 .....
담당 백엔드님에게 오타 수정을 요청하고 마무리했다 ..
디자이너님과 얘기할 부분
비밀번호 재발급
비밀번호 재발급하기를 구현하는 도중,
'확인' 버튼과 '새 비밀번호 받기' 버튼의 기능이 중복되는 것을 발견했다.
과정
1. 아이디와 이메일 input 값을 입력 후 '인증요청' 클릭
--> '이메일 인증 코드'가 메일로 발송된다.
2. 메일로 받은 인증코드를 입력 후 '확인' or '새 비밀번호 받기' 클릭
--> '새 임시 비밀번호'가 메일로 발송된다.
이렇게 되는 경우,
api는 1, 2 두 가지라서 2번의 api가 중복되기 때문에
내일 정규 회의 때 '새 비밀번호 받기' 버튼을 삭제하는 방안으로 제안해봐야겠다.
백엔드 측에서 api를 하나 더 파거나 디자인을 수정하는 방법밖에 답이 없어서
회원가입
아직 구현하지 않은 figma 디자인을 가져왔다.
여기서 '회원가입'을 할 때는 이메일, 아이디, 비밀번호, 닉네임, 프로필사진 총 5가지의 data가 필요하다.
하지만 회원가입 api 에는 프로필 사진 data가 누락되어 있다.
프로필 사진을 추가한지 얼마 되지 않았기 때문이다.
그리고 바로 '회원가입' 버튼이 있어서 회원가입에 필요한 요소들을 다 채웠다는 생각을 들게끔 한다.
하지만 다음 페이지인 '프로필 설정' 페이지에서는,
바로 '환영합니다!' 라는 인사로 하여금 이미 회원가입을 완료했다는 듯이 구성되어 있다.
그렇기 때문에 '프로필 이미지'를 구현하려면 2가지 방법이 있다.
1. 프로필 이미지 api 를 따로 하나 더 만들어야 한다.
2. 디자이너님께 '회원가입' 버튼 대신 '다음' 버튼을 넣어 회원가입 api 안에 '프로필 사진' data만 추가해도 되게끔 얘기한다.
이런 식으로 구성하는게 더 간편한 방법이기 때문에 내일 회의 때 디자이너님께 건의해봐야겠다.
