랭크 페이지에는 내 순위로 이동하는 기능이 필요하다.
페이지 내에 있는 내 순위를 탭 또는 클릭하면 페이지와 스크롤을 이동시켜 내 순위로 이동한다.
프로젝트에서 랭크 리스트는 페이지당 20개씩 보여준다. 해서 내 순위가 위치하는 페이지를 찾고, 페이지내이션을 통해 페이지를 이동시킨다.
나의 순위를 클릭하면 리코일을 통해 페이지 및 스크롤 이동에 대한 상태를 만들어준다.
import { useSetRecoilState, useRecoilValue } from 'recoil';
import { myRankPosition, isScrollState } from 'utils/recoil/myRank';
export default function MyRank() {
const myRank = useRecoilValue(myRankPosition);
const setIsScroll = useSetRecoilState(isScrollState);
const onClick = () => {
setIsScroll(true);
};
return (
<span onClick={onClick}>나의 순위 {myRank}위 </span>
);
};
나의 순위로 이동하는 상태를 만들었다면, 이를 바탕으로 페이지와 스크롤 위치를 찾아서 이동하는 코드를 작성한다.
useEffect(() => {
if (isScroll) {
setPage(Math.ceil(myRank / 20));
}
}, [isScroll]); // 내 순위가 위치하는 페이지 찾기
useEffect(() => {
getRankData();
}, [page]); // 페이지가 바뀌었다면 해당페이지 데이터 요청하기
const getRankData = async () => {
try {
const res = await instance.get(`${path}`); // axios 인스턴스
setRankData(res?.data); // 랭크 리스트 데이터
setMyRank(res?.data.myRank); // 내 순위
} catch (e) {
setErrorMessage('DK01'); // 에러페이지 처리
}
};
useEffect(() => {
if (isScroll) {
window.scrollTo({ top: ((myRank - 1) % 20) * 45, behavior: 'smooth' });
setIsScroll(false);
}
}, [rankData, isScroll]); // 페이지가 바뀌거나 스크롤상태가 바뀌었을 때 스크롤 이동 유무 파악하여 이동하기
- Math.ceil -> c, c++과 달리 number가 소수까지도 표현을 해주기 때문에 올림 함수를 통해 페이지를 찾아준다.
- winddow.scrollTo(xpos, ypos) -> x위치, y위치로 스크롤을 이동한다.
- window.scrollTo({top:0, left:0, behavior:'auto'});
-> top 세로 위차, left 가로 위치, behavior 스크롤 효과를 지정한다.
대킴의 대는 클 대.
멋집니다.