Feat: 랭킹 페이지 구현

package.json

@@ -13,9 +13,7 @@
     "prepare": "husky"
   },
   "lint-staged": {
-    "*.{js,jsx,ts,tsx}": [
-      "biome check"
-    ]
+    "*.{js,jsx,ts,tsx}": ["biome check"]
   },
   "dependencies": {
     "@emotion/react": "^11.14.0",

src/Follow/page.tsx

@@ -3,6 +3,7 @@ import { DetectTypeSelector } from "@/Follow/components/DetectTypeSelector";
 import { FollowList } from "@/Follow/components/FollowList";
 import { RefreshButton } from "@/Follow/components/RefreshButton";
 import { useQueryFollowDetect } from "@/Follow/hooks/apis/useQueryFollowDetect";
+import { BottomNav } from "@/common/components/BottomNav";
 import Header from "@/common/components/Header";
 import Spacer from "@/common/components/Spacer";
 import UserListItemCard from "@/common/components/UserListItemCard";
@@ -18,7 +19,11 @@ export function FollowPage() {
   const [selectedType, setSelectedType] = useState<FollowDetectType>("mutual");
   const { data, fetchNextPage, hasNextPage, isFetchingNextPage } = useQueryFollowDetect(selectedType);
 
-  const observerRef = useInfiniteScroll({ fetchNextPage, hasNextPage, isFetchingNextPage });
+  const observerRef = useInfiniteScroll({
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  });
 
   return (
     <>
@@ -82,6 +87,7 @@ export function FollowPage() {
           </Flex>
         )}
       </Container>
+      <BottomNav />
     </>
   );
 }

src/Ranking/apis/ranking.ts

@@ -0,0 +1,31 @@
+import { apiClient } from "@/common/api";
+
+export type durationType = "week" | "month" | "year";
+
+interface RankingUser {
+  userid: number;
+  profileImageUrl: string;
+  username: string;
+  rankPoint: number;
+}
+
+interface RankingUserResponse {
+  rankingList: RankingUser[];
+  lastPage: boolean;
+}
+
+interface QueryUserRankingParams {
+  duration: durationType;
+  page?: number;
+  size?: number;
+}
+
+export async function queryUserRanking({ duration, page = 0, size = 20 }: QueryUserRankingParams) {
+  const params = new URLSearchParams({
+    period: duration,
+    page: page.toString(),
+    size: size.toString(),
+  });
+
+  return apiClient.get<RankingUserResponse>(`api/v1/rankings?${params.toString()}`);
+}

src/Ranking/components/PodiumItem.tsx

@@ -0,0 +1,104 @@
+import UserProfileAvatar from "@/common/components/UserProfileAvatar";
+import { rem } from "@/common/utils/rem";
+import styled from "@emotion/styled";
+
+interface PodiumItemProps {
+  rank: number;
+  nickname: string;
+  point: number;
+  profileImage: string;
+}
+
+export function PodiumItem({ rank, nickname, point, profileImage }: PodiumItemProps) {
+  return (
+    <PodiumItemWrapper rank={rank}>
+      <ImageWrapper>
+        <UserProfileAvatar src={profileImage} alt="프로필 사진" style={{ width: "100%", height: "100%" }} />
+        <Medal rank={rank}>{rank}</Medal>
+      </ImageWrapper>
+      <Nickname rank={rank}>{nickname}</Nickname>
+      <Point>{point}pt</Point>
+    </PodiumItemWrapper>
+  );
+}
+
+const PodiumItemWrapper = styled.div<{ rank: number }>(({ rank }) => {
+  const getPosition = () => {
+    switch (rank) {
+      case 1:
+        return {
+          left: "50%",
+          transform: "translateX(-50%)",
+          top: 0,
+        };
+      case 2:
+        return {
+          left: "2rem",
+          top: rem(3),
+        };
+      case 3:
+        return {
+          right: "2rem",
+          top: rem(3),
+        };
+      default:
+        return {};
+    }
+  };
+
+  return {
+    position: "absolute",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    width: "fit-content",
+    ...getPosition(),
+  };
+});
+
+const ImageWrapper = styled.div({
+  position: "relative",
+
+  width: rem(7.8),
+  height: rem(7.8),
+  padding: rem(0.3),
+  backgroundColor: "#ffffff",
+
+  borderRadius: rem(999),
+});
+
+const Medal = styled.div<{ rank: number }>(({ rank }) => ({
+  position: "absolute",
+  bottom: 0,
+  right: 0,
+
+  width: rem(2.4),
+  height: rem(2.4),
+
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+
+  fontSize: rem(1.7),
+  fontWeight: 700,
+  color: "#ffffff",
+
+  borderRadius: rem(999),
+  backgroundColor: rank === 1 ? "#F8A900" : rank === 2 ? "#B4B5BB" : rank === 3 ? "#D46A28" : "#FFFFFF",
+}));
+
+const Nickname = styled.div<{ rank: number }>(({ rank }) => ({
+  marginTop: rem(0.5),
+
+  fontSize: rem(1.7),
+  fontWeight: 700,
+  color: rank === 1 ? "#F8A900" : rank === 2 ? "#B4B5BB" : rank === 3 ? "#D46A28" : "#ffffff",
+}));
+
+const Point = styled.div({
+  marginTop: rem(0.1),
+
+  fontSize: rem(1.7),
+  fontWeight: 700,
+  color: "#ffffff",
+});

src/Ranking/components/RankingItem.tsx

@@ -0,0 +1,77 @@
+import UserProfileAvatar from "@/common/components/UserProfileAvatar";
+import { rem } from "@/common/utils/rem";
+import styled from "@emotion/styled";
+
+interface RankingItemProps {
+  rank: number;
+  nickname: string;
+  point: number;
+  profileImage: string;
+}
+
+export function RankingItem({ rank, nickname, point, profileImage }: RankingItemProps) {
+  return (
+    <RankingItemWrapper>
+      <LeftSection>
+        <Rank>{rank}</Rank>
+        <ImageWrapper>
+          <UserProfileAvatar src={profileImage} alt="프로필 사진" style={{ width: "100%", height: "100%" }} />
+        </ImageWrapper>
+        <Nickname>{nickname}</Nickname>
+      </LeftSection>
+      <Point>{point}pt</Point>
+    </RankingItemWrapper>
+  );
+}
+
+const LeftSection = styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: rem(2.6),
+});
+
+const RankingItemWrapper = styled.div({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flexShrink: 0,
+
+  width: "100%",
+  height: rem(6.9),
+
+  padding: `0 ${rem(2)}`,
+
+  borderRadius: rem(1),
+  backgroundColor: "rgba(138, 138, 138, 0.19)",
+});
+
+const Rank = styled.div({
+  fontSize: rem(2),
+  fontWeight: 700,
+  color: "#000000",
+});
+
+const ImageWrapper = styled.div({
+  position: "relative",
+
+  width: rem(5),
+  height: rem(5),
+  padding: rem(0.2),
+  backgroundColor: "#ffffff",
+
+  borderRadius: rem(999),
+});
+
+const Nickname = styled.div({
+  fontSize: rem(1.6),
+  fontWeight: 700,
+  color: "#000000",
+});
+
+const Point = styled.div({
+  fontSize: rem(1.6),
+  fontWeight: 700,
+  color: "#000000",
+
+  justifySelf: "flex-end",
+});

src/Ranking/hooks/useQueryUserRanking.ts

@@ -0,0 +1,33 @@
+import type { ApiResponse } from "@/common/types/api";
+import { type InfiniteData, useInfiniteQuery } from "@tanstack/react-query";
+import { type durationType, queryUserRanking } from "../apis/ranking";
+
+interface RankingUserResponse {
+  rankingList: Array<{
+    userid: number;
+    profileImageUrl: string;
+    username: string;
+    rankPoint: number;
+  }>;
+  lastPage: boolean;
+}
+
+export function useQueryUserRanking({ duration }: { duration: durationType }) {
+  return useInfiniteQuery<
+    ApiResponse<RankingUserResponse>,
+    Error,
+    InfiniteData<ApiResponse<RankingUserResponse>>,
+    string[],
+    number
+  >({
+    queryKey: ["userRanking", duration],
+    queryFn: ({ pageParam = 0 }) => queryUserRanking({ duration, page: pageParam, size: 20 }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      if (lastPage.data.lastPage) {
+        return undefined;
+      }
+      return allPages.length;
+    },
+  });
+}