[수업과제] 카우치코딩 팀 프로젝트 리뷰 ⑤

이번 주 작업 내용 리뷰

• 구글 oauth연동
  저번 주말에 우리 팀 모두 모여 firebase와 구글 oauth 연동하는 것을 마무리 지었다.
  처음에는 package.json에 proxy로 백엔드 주소를 넣어 사용했었는데 이상하게도 계속 localhost3000으로 가게되서 창엽님이 프록시미들웨어를 사용하셔서 완료하셨다.
  프론트, 백엔드 구분할 것 없이 모두가 애먹던 부분이라 로그인, 회원가입이 모두 정상적으로 처리된 것을 확인했을 때 모두 매우 감격했다.
• 마이페이지
  현재는 나는 마이페이지 쪽 작업을, 창엽님은 검색페이지쪽 작업을 도맡아 하고 있는 중이다.
  마이페이지쪽 작업을 하면서 정말 고려할게 많다는 것을 느꼈다. 지금은 백엔드 api 개발이 완료되지 않아 아직 연동하지 못한 상태인데 json-server로 해둔 지금 작업이 이게 맞나?싶을 정도로 헷갈린다.
• header 디자인 수정
  로그아웃을 header에 바로 표출하지 않고, 유저 아바타를 클릭하면 마이페이지와 logout버튼이 보이도록 수정했다. 물론 반응형까지!

마이페이지는 상단에 유저의 간략한 프로필과 작성글/작성리뷰의 갯수가 표시된다.
그리고 하단에 3개의 탭이 구분되며, 각각 '좋아요 리스트', '작성한 리뷰', '알림' 리스트를 볼 수 있다.

기능 정리

1. 마이페이지 공통

• 유저 로그인 상태 체크 후
  로그인 된 유저가 있으면 -> 해당 유저의 정보 불러오기
  로그인 된 유저가 없으면 -> 메인페이지로 redirection

• 닉네임 수정 후 백엔드에 patch로 데이터 보내기

2. 좋아요 리스트

• 해당 유저가 좋아요를 클릭 한 캠핑장 리스트 불러오기
• pagination 반영
• 썸네일, 캠핑장명, description, 주소 등을 클릭하면 해당 캠핑장 상세페이지로 이동
• 좋아요 버튼 클릭 시 목록에서 제거 및 해당 캠핑장의 좋아요 수에서 1차감하기

3. 작성한 리뷰

• 해당 유저가 작성한 리뷰 목록 불러오기
• 리뷰 수정 클릭 시, 수정가능한 컴포넌트로 변경 및 내가 작성한 리뷰데이터 불러오기
• 수정완료 시, 데이터 보내기
• 삭제 시 목록에서 제거 및 삭제 api

4. 알림

• 좋아요, 댓글 등의 이슈발생 시 목록에 추가
• 컨텐츠 클릭 시 읽기 처리와 동시에 해당 게시글로 이동
• 개별 삭제
• 전체 알림 읽기
• 전체 삭제

이번주 느낀점😱

axios를 쓰는 것이 익숙하지 않아 헷갈린다. 그런데 json-server로 하니까 나중에 백엔드 api로 했을 때 정상적으로 동작될 지 걱정이 된다.
UI만 봤을 땐 단순하게 생각했던 부분들도 권한이나 유저가 동작함에 따라 고려하면서 할 작업이 계속해서 생겨났다..
진행속도는 아직 빠른편이라는 생각이 들지만, 다음주 중으로 백엔드 api가 개발 완료되면 본격적인 시련의 시작이 아닐까 싶다.