59_create_my_page

[Pyotato]

Description & Technical Solution

• create_my_page #59 마이페이지는 크게 2가지 section으로 구성되어 있습니다.

  • 내 정보
    • 프로필 이미지, 소개, 유저 닉네임
  • 내 로드맵
    • 내가 작성한 로드맵
    • 내가 참여한 로드맵

• 위의 데이터 중, 마이페이지에서는 로드맵 정보는 변경할 수 없는 내용인 반면에, 내 정보는 수정 가능합니다.

• 또한, 로드맵 로드 시간이 길어서 해당 영역을 로드하느라 페이지 전체의 로딩 시간이 지연되어, 사용자가 불편함을 느낄 것이라고 판단하여, parellel routes을 활용하기로 했습니다. 참고 포스트

• 파일 구조는 아래와 같습니다.

• 살펴보자면, @info, @roadmaps는 각각 slot으로, 경로가 아닌 page 내의 page라고 보시면 됩니다. 따라서 로드되거나 정보가 변동되거나 등의 각 sub-page는 독립적으로 동작합니다. (내 정보를 수정한다고 로드맵 정보 전체가 혹은 페이지 전체가 새로 로드되지 않습니다.)

• 각각 slot의 하위에는 default.tsx 파일이 존재합니다. 해당 파일은 404대신에 보여줄 페이지나 디폴트로 보여질 페이지에 해당됩니다.

• 마이페이지의 두 번째 고려점은, 탭에 따라 내 로드맵이 표시되는 점입니다.

• url에 해당 탭의 정보를 표시해서 새로고침을 해도 해당 데이터가 표시되도록 했습니다.

• 자세한 동작은

  • 마이페이지 이동 : /myPage 로 url이 표시되고, 디폴트는 진행중인 로드맵(in-progress)의 탭과 데이터가 보여집니다.
  • /in-progress클릭시, shallow routing을 위해 (router로 인한 페이지 이동 방지) window.history.pushState로 해당 탭의 url을 표시하고, 새로고침을 해도 해당 탭은 유지됩니다.
  • /created 에 해당 되는 탭을 클릭 시, 위와 같은 동일한 동작으로 사용자가 생성한 로드맵을 보여줍니다.
  • 해당 동작은 새로고침뿐만 아니라, 뒤로가기, 앞으로 가기등을 해도 유지됩니다.
  • url 정보를 표시하기 위해 localStorage에 해당 데이터를 저장했습니다.

Checklist

• I have commented my code, particularly in hard-to-understand areas.
• Already rebased against main branch.

Screenshots

• 디폴트로 마이페이지로 이동 시 진행 중인 로드맵 데이터 표시

• /mypage/in-progress 시 진행 중인 로드맵 데이터 표시

• /mypage/created 시 진행 중인 로드맵 데이터 표시

• 내 정보 수정

• 마이페이지에서 내 정보 위에 mouseOver 시, 내 정보 수정이라는 문구가 뜹니다. 내 정보 영역을 클릭 시, 모달이 뜨고, 수정이 반영됩니다.

• 페이지에서 useQueryClient에서 유저 정보에 관한 쿼리키만 invalidateQueries하고 해당 데이터만 refetch됩니다.

• 다른 api 응답과 동일하게, 성공시에는 성공 toast, 실패 시에는 fail toast가 뜹니다.

• 유저의 프로필 이미지에 마우스 호버 시 이미지 변경이라는 문구가 뜨고, 이미지 클릭 시, 수정 모달이 뜹니다.

• 해당 모달영역에 이미지를 드롭하거나 클릭해서 이미지를 등록하면 api 버튼이 활성화되어 수정이 가능합니다.

• 성공 시 이미지가 변경 되며, 프로필 이미지 변경 성공 toast가 함께 뜹니다.

• 업로드한 이미지 위로 마우스를 호버하면 변경하기라는 문구가 뜨며, 해당 이미지를 클릭하면 새로운 이미지로 대체할 수 있습니다.