Feat: 랭킹 페이지 구현

[jungwoo3490]

close #38

• 긴급 배포 건이라 구두 논의 후 선머지합니다!

☑️ 완료 태스크

• 주간/월간/연간 랭킹 조회 기능 구현 (20개씩 무한스크롤)
• Bottom NavBar 구현

🔎 PR 내용

랭킹 조회 기능 구현

useInfiniteQuery 사용해서 랭킹을 20개씩 가져오도록 구현했어요. @seobbang 이 만든 useInfiniteScroll hook 사용해서 무한스크롤 형태로 구현했습니다!

랭킹 업데이트 시 백엔드에서 성능 최적화를 위해 청크 단위로 순위 업데이트를 진행하기 때문에 일부만 업데이트 되었을 경우 랭킹 순위가 뒤죽박죽이 될 가능성이 있어서 이 부분에 있어 해결책을 고민 중에 있어요.

첫번째로, 업데이트가 진행중일 때 진행 전 랭킹 스냅샷을 보여주는 방법이 있을 수 있는데, 생각해보면 이 업데이트 기간에 새로 유저를 팔로우하게 되어도 UI에는 업데이트 진행 전 시점 스냅샷이 보여지기 때문에 팔로우한 유저가 랭킹에 나타나지 않는 이슈가 있을 수 있습니다.

두번쨰로, 업데이트가 진행중일 때 업데이트가 진행중이라는 표시를 띄우는 건데, 문제는 유저가 많아질 경우 업데이트 시간이 엄청나게 오래 걸릴 가능성이 있어 그 동안 유저가 랭킹을 조회할 수 없다는 이슈가 있을 수 있습니다.

스레드에서 계속해서 논의 중인 내용이라 자세한 내용은 스레드에서 확인할 수 있어요.

랭킹 조회 기능 구현

Bottom NavBar를 구현했어요.
추후 페이지 추가시 navItems에 추가하면 자동으로 옵션에 추가됩니다.

const navItems = [
  {
    label: "팔로우",
    path: "/follow",
    icon: IconFollow,
    activeIcon: IconFollowActive,
  },
  {
    label: "랭킹",
    path: "/ranking",
    icon: IconRanking,
    activeIcon: IconRankingActive,
  },
];

/ 경로 진입 시 로그인 페이지 리다이렉트

현재 메인 페이지가 구현이 안 된 상태이고, 메인 페이지에는 authLoader가 적용되어있지 않아서 / 진입시 빈 화면이 뜨는데, 로그인 페이지로 리다이렉트되었으면 좋겠다는 백엔드 측의 니즈가 있었어요.
그래서 임시로 Router에 / 진입시 로그인 페이지로 강제 리다이렉트 하는 부분을 추가했어요. 추후 제거될 부분이라 주석도 남겨두었습니다!

 path: "/",
    element: <GlobalLayout />,
    children: [
      // 메인페이지 부재로 임시로 초기 / 접근시 강제 로그인 리다이렉트 구현 부분
      {
        index: true,
        element: <Navigate to="/login" replace />,
      },
      {
        path: "login",
        element: <LoginPage />,
      },

📷 스크린샷

2025-09-26.5.19.58.mov