Feat: 메인페이지 뒤로가기 클릭 시 무한스크롤 스크롤 위치를 기억한다 - Githubissues

Kim-DaHam / Portfolly

Portfolly 프로젝트 리팩토링

1 stars 0 forks source link

Feat: 메인페이지 뒤로가기 클릭 시 무한스크롤 스크롤 위치를 기억한다 #59

Closed Kim-DaHam closed 8 months ago

Kim-DaHam commented 8 months ago

개요

메인 페이지 무한스크롤 중 하나를 클릭하고, 뒤로가기를 하면 이전 스크롤 위치를 기억하고 해당 위치로 이동합니다.

작업사항

useSuspenseInfiniteQuery를 사용해 무한스크롤을 재구현한다.
PortfolioList(무한스크롤 리스트) 중 한 개를 클릭하는 순간 SessionStorage에 현재 스크롤 위치와 PortfolioItem 인덱스를 저장한다.
PortfolioDetailPage로 이동 후 브라우저 뒤로가기 클릭, 혹은 '뒤로가기' 버튼 클릭 시 이전 무한스크롤 위치로 돌아간다.

변경로직

useSuspenseInfiniteQuery를 사용해 포트폴리오 무한스크롤 데이터를 가져온다.
mixins 파일을 생성해 스타일드 컴포넌트를 조금 더 간편하게 표현한다.
최상위 스타일드 컴포넌트는 Wrapper, 내용을 담는 컨테이너는 Content, 그 이하는 Box로 표기한다.

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/02d51d96-e63e-4a62-a153-6cc66455ffd5