[42gg] 내 순위로 이동하기

랭크 페이지에는 내 순위로 이동하는 기능이 필요하다.
페이지 내에 있는 내 순위를 탭 또는 클릭하면 페이지와 스크롤을 이동시켜 내 순위로 이동한다.

내 순위로 이동

• 프로젝트에서 랭크 리스트는 페이지당 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 스크롤 효과를 지정한다.

참고

https://enai.tistory.com/33