[ToyProject] 점진적 과부하 사이트 - 15

Profile Page 관련 기획

• 맨 상단에는 기존에 썼던
  GlowHeader 컴포넌트를 재활용해서 Profile(title 부분) 페이지임을 표시한다.
• 하단에는
  본래 위와 같이 디자인을 했지만, email -> id로 바뀌고, height & weight 정보는 초기 버전에서는 추가하지 않을 예정이므로, nickname 부분을 그대로 두고, input 옆에 수정 버튼을 만들며, height/weight 부분을 password로 하고, input 옆에 수정 버튼을 추가한다. 그리고 하단부는 logout 버튼과 delete account 버튼만 남겨둔다.
• nickname input에는 default로 처음에 로그인 했을 때 recoil state에 담아두었던 nickname 정보를 담아준다. 이 때, input value를 변경하면 local state인 nicknameState(가명)가 변경되면서 input value가 변한다. 추가로, input에 focus 됐을 때는 nicknameState 값으로 대체하지만, focus out되면 recoil state로 대체한다. 그래야 input을 입력하다가 수정 버튼을 안누르고 다른데를 눌렀을 때 자연스러운 UX가 된다.
• nickname input을 변경한 다음에 수정 버튼을 누르면 이전에 회원가입에서 썼던 모듈(유효성 검사)을 돌린다. 성공하면 api를 호출하여 결과를 modal창으로 띄워주고, FE 단에서 실패하면 모달창으로 유효성 검사 메시지를 보여준다. 그리고 성공했을 때는 recoil state의 nickname을 바꿔준다.
• 패스워드도 nickname과 유사하게 개발한다. 이 때, 차이점이라고 하면 password는 input에 점으로 표시된다. 이 때, 지금은 비밀번호 찾기 기능이 따로 없으므로 여기서 현재 비밀번호를 체크할 수 있게한다(그렇게 크리티컬한 개인 정보를 담은 앱이 아니므로 이렇게 한다). input의 오른쪽에 비밀번호를 점표시에서 실제 값으로 바꿔주는 UX를 제공한다. 그 다음엔 비밀번호도 nickname과 똑같이 유효성 검사 -> api 호출 -> 모달창으로 결과 호출의 프로세스를 밟는다.
• 로그아웃 버튼은 api 호출 후에 / 로 라우팅하는 것 외에는 딱히 할게 없다.
• 회원 탈퇴 버튼은 빨간색으로 해놓고, 누르면 일단 예/ 아니오를 선택할 수 있는 최종 확인 모달창이 뜨도록 한다. 이 때, 예를 누르면 N초후에 랜딩 화면으로 이동합니다 메시지가 나오면서 회원탈퇴를 마무리하고, 아니오를 누르면 취소한다.

기획을 바탕으로 한 설계 및 수도 코드 작성

• 닉네임 input 과 password input은 UI 적으로는 동일하다. 하지만, type이 다르고, 비밀번호 input에는 비밀번호를 볼 수 있는 기능(점 표시에서 실제로 볼 수 있는 기능)이 추가 된다. 따라서 일단은 분리해서 개발한다. 각각 NicknameInput, PasswordInput 으로 한다. c
• NicknameInput은 recoil state로 user 정보를 받고, 그 중에서 nickname 정보를 갖고 있는다. 이에 더하여 local state를 갖고 있는데, 이게 input value에 들어가고, onChange에서 setState를 통해 업데이트 해준다. 그리고 앞서 말한 user state(recoil)를 local state의 기본값으로 해놓는다. 기본값으로 한다는건 useEffect(componentDidMount 시점)로 세팅을 해놓음을 의미한다. 그리고 onChange 로 값이 바뀌다가 focus out이 되면 이전의 user state값으로 다시 돌려놓는다. 하지만, 수정 버튼을 눌러서 성공했다면, user 정보 자체를 변경하고, focus out 하여 input 값 자체를 바꿔놓는다.
• 회원 탈퇴는 confirm 모달과 다른 yes or no를 선택할 수 있는 모달을 따로 만든다음에 작업한다. yes를 눌렀을 때의 event, no를 눌렀을 때의 event를 각각 prop으로 받을 수 있도록 한다. prop의 종류는 message(string), modalOn(bool), leftFunc(function), rightFunc(function) 이런식으로 받는다.
• 마지막엔 전에 쓰던 모달을 최종적으로 띄워야할 수 있다(회원탈퇴 모달에 예를 눌렀으면 n초 뒤에 랜딩 페이지로 이동한다는 메시지가 뜨고, 카운트 다운 후에 이동한다. 이 때, n초 전에 확인 버튼을 누르면 그 즉시 이동하도록 한다. 이를 위해 이전에 만든 모달의 confirm 버튼에 onClick event를 추가해놓는다(선택 prop). 이 때, 로그아웃 + 회원 탈퇴 api를 동시에 실행해야할 것!

개발

띠용 ??.. 일단 이부분은 UI Design을 아직 제대로 기획해놓은 상태가 아니라 일단 틀만 잡아놨다. css만 입히면 되는 상태까지 구현했다. 실제로 수정 로직, 탈퇴 로직 등은 모두 작동한다. 내일은 백엔드쪽 작업을 한다음에 fetch든, axios든 써서 로컬 fe, be 통신을 통해 회원가입(CREATE) -> 로그인(READ) -> 닉네임 및 패스워드 수정(UPDATE) -> 탈퇴까지(DELETE) 해봐야겠다.