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

Daehyun·2022년 7월 27일
1

42gg

목록 보기
4/8
post-thumbnail

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

내 순위로 이동

  • 프로젝트에서 랭크 리스트는 페이지당 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

2개의 댓글

comment-user-thumbnail
2022년 7월 27일

대킴의 대는 클 대.
멋집니다.

1개의 답글