Fix: 무한스크롤 뒤로가기 에러를 해결한다.

[Kim-DaHam]

개요

MainPage.tsx 페이지의 PortfolioCardList.tsx 무한 스크롤 뒤로가기 시 마지막 스크롤 위치를 기억하지 못하는 에러를 해결합니다.

작업사항

• 무한스크롤 중간에 포트폴리오 클릭 후, 뒤로가기를 클릭하면 이전 스크롤 위치를 기억한다.
  • sessionStorage에 이전 스크롤 위치 anchorPosition를 기억한다.
  • sessionStorage에 클릭한 포트폴리오 인덱스 clickedPortfolioIndex를 저장한다.
  • 페이지 렌더링 시 showsNum을 clickedPortfolioIndex로 바꿔 필요한 개수만큼 PortfolioCard.tsx를 렌더링한다.
• PortfolioDetailPage.tsx 뒤로가기 버튼을 경우에 따라 다르게 한다.
  • 바로 이전 페이지가 MainPage.tsx 무한스크롤인 경우 마지막 스크롤 위치로 돌아간다.
  • 중간에 다른 경로 방문 후 뒤로가기 클릭 시 해당 포트폴리오 section 목록 최상단으로 이동한다.

변경로직

• PortfolioCard.tsx를 클릭 후 PortfolioDetailPage.tsx 페이지로 navigate할 때, {state: prevPathname: 'main'}} 상태값을 함께 보낸다.
• PortfolioDetailPage.tsx 페이지에서 뒤로가기 클릭 시 location.prevPathname이 'main'이 아닌 경우 현재 포트폴리오 section 목록으로 이동한다.
  • sessionStorage에 저장된 무한스크롤 스크롤 위치를 삭제하고 최상단으로 이동한다.

변경전

• ex) 무한 스크롤 -> 포트폴리오 디테일 페이지 -> 마이 페이지(등 다른 페이지) -> 뒤로가기 -> 포트폴리오 디테일 페이지 -> 뒤로가기 시 무한 스크롤 페이지로 돌아가지 않고 중간에 방문한 다른 페이지로 이동한다.
• 사용자 경험을 위해 /main/:section으로 이동시킨다.

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/9de5197e-324a-4650-889b-0ccc17759803