refactor : rank Api querykey factor

src/api/attendanceApi.ts

@@ -1,16 +1,26 @@
 import { useQuery } from 'react-query';
 import axios from 'axios';
 import { DateTime } from 'luxon';
-import { CallenderChartInfo, TodayAttendInfo, TodayAttendPoint } from './dto';
+import {
+  AttendRankInfo,
+  CallenderChartInfo,
+  PageAndSize,
+  TodayAttendInfo,
+  TodayAttendPoint,
+  TodayAttendRank,
+} from './dto';
 
 const attendanceKeys = {
+  base: ['attendances'] as const,
   todayAttendancePoint: ['todayAttendancePoint'],
   todayAttendanceInfo: ({ memberId }: { memberId: number }) => ['todayAttendanceInfo', memberId],
   attendanceInfoList: ({ memberId, year }: { memberId: number; year: number }) => [
     'attendanceInfoList',
     memberId,
     year,
   ],
+  todayAttendanceRank: (param: PageAndSize) => [...attendanceKeys.base, 'todayRank', param] as const,
+  continuousAttendanceRank: () => [...attendanceKeys.base, 'continuousRank'] as const,
 };
 
 const useGetTodayAttendancePointQuery = () => {
@@ -36,4 +46,31 @@ const useGetAttendanceInfoListQuery = ({ memberId, year }: { memberId: number; y
   return useQuery<CallenderChartInfo[]>(attendanceKeys.attendanceInfoList({ memberId, year }), fetcher);
 };
 
-export { useGetTodayAttendancePointQuery, useGetTodayAttendanceInfoQuery, useGetAttendanceInfoListQuery };
+const useGetTodayAttendanceRank = ({ page, size = 10 }: PageAndSize) => {
+  const params = { page, size };
+
+  const fetcher = () =>
+    axios
+      .get('/attendances/today-rank', {
+        params,
+      })
+      .then(({ data }) => data);
+
+  return useQuery<TodayAttendRank>(attendanceKeys.todayAttendanceRank(params), fetcher, {
+    keepPreviousData: true,
+  });
+};
+
+const useGetContinuousAttendanceRank = () => {
+  const fetcher = () => axios.get('/attendances/continuous-rank').then(({ data }) => data);
+
+  return useQuery<AttendRankInfo[]>(attendanceKeys.continuousAttendanceRank(), fetcher);
+};
+
+export {
+  useGetTodayAttendancePointQuery,
+  useGetTodayAttendanceInfoQuery,
+  useGetAttendanceInfoListQuery,
+  useGetTodayAttendanceRank,
+  useGetContinuousAttendanceRank,
+};

src/api/memberApi.ts

@@ -4,10 +4,12 @@ import axios from 'axios';
 import { PASSWORD } from '@constants/apiResponseMessage';
 import { useApiError } from '@hooks/useGetApiError';
 import { formatGeneration } from '@utils/converter';
-import { ProfileInfo, MemberDetailInfo } from './dto';
+import { ProfileInfo, MemberDetailInfo, PageAndSize, PointRank } from './dto';
 
 const memberKeys = {
-  memberList: ['member', 'memberList'] as const,
+  base: ['member'] as const,
+  memberList: () => [...memberKeys.base, 'memberList'] as const,
+  pointRank: (params: PageAndSize) => [...memberKeys.base, 'pointRank', params] as const,
 };
 const profileKeys = {
   profileInfo: (memberId: number) => ['profile', 'profileInfo', memberId] as const,
@@ -29,7 +31,7 @@ const useGetMembersQuery = ({
         };
       });
     });
-  return useQuery<MemberDetailInfo[]>(memberKeys.memberList, fetcher, {
+  return useQuery<MemberDetailInfo[]>(memberKeys.memberList(), fetcher, {
     onSuccess,
   });
 };
@@ -175,7 +177,7 @@ const useEditMemberTypeMutation = () => {
 
   return useMutation(fetcher, {
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: memberKeys.memberList });
+      queryClient.invalidateQueries({ queryKey: memberKeys.memberList() });
     },
   });
 };
@@ -186,11 +188,21 @@ const useDeleteMemberMutation = () => {
 
   return useMutation(fetcher, {
     onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: memberKeys.memberList });
+      queryClient.invalidateQueries({ queryKey: memberKeys.memberList() });
     },
   });
 };
 
+const useGetPointRank = ({ page, size = 10 }: PageAndSize) => {
+  const params = { page, size };
+
+  const fetcher = () => axios.get('/members/point-rank', { params }).then(({ data }) => data);
+
+  return useQuery<PointRank>(memberKeys.pointRank(params), fetcher, {
+    keepPreviousData: true,
+  });
+};
+
 export {
   useGetMembersQuery,
   useGetProfileQuery,
@@ -204,4 +216,5 @@ export {
   useWithdrawalMutation,
   useEditMemberTypeMutation,
   useDeleteMemberMutation,
+  useGetPointRank,
 };

src/pages/Game/Baseball/api/baseballApi.ts

@@ -1,14 +1,17 @@
 import toast from 'react-hot-toast';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import axios from 'axios';
+import { GameRankInfo } from '@api/dto';
 import { gameKeys } from '@api/gameApi';
 import { useApiError } from '@hooks/useGetApiError';
 import { GameInfo, GameResultInfo, GameStatus } from './baseballDto';
 
 export const baseballKeys = {
+  base: ['game'] as const,
   game_info: ['game_info'] as const,
   status: ['status'] as const,
   result: ['result'] as const,
+  gameRank: () => [...baseballKeys.base, 'rank'] as const,
 };
 
 const useGetGameInfoQuery = () => {
@@ -69,4 +72,17 @@ const useGetResultQuery = () => {
   return useQuery<GameResultInfo>(baseballKeys.result, fetcher);
 };
 
-export { useGetGameInfoQuery, useGetBaseBallStatusQuery, useGameStartMutation, useGuessMutation, useGetResultQuery };
+const useGetGameRank = () => {
+  const fetcher = () => axios.get('/game/rank').then(({ data }) => data);
+
+  return useQuery<GameRankInfo[]>(baseballKeys.gameRank(), fetcher);
+};
+
+export {
+  useGetGameInfoQuery,
+  useGetBaseBallStatusQuery,
+  useGameStartMutation,
+  useGuessMutation,
+  useGetResultQuery,
+  useGetGameRank,
+};

src/pages/rank/Rank.tsx

@@ -1,15 +1,12 @@
 import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import { Typography } from '@mui/material';
+import { useGetContinuousAttendanceRank, useGetTodayAttendanceRank } from '@api/attendanceApi';
 import { AttendRankInfo, GameRankInfo } from '@api/dto';
-import {
-  useGetContinuousAttendanceRank,
-  useGetGameRank,
-  useGetPointRank,
-  useGetTodayAttendanceRank,
-} from '@api/rankApi';
+import { useGetPointRank } from '@api/memberApi';
 import usePagination from '@hooks/usePagination';
 import { formatGeneration } from '@utils/converter';
+import { useGetGameRank } from '@pages/Game/Baseball/api/baseballApi';
 import ServerAvatar from '@components/Avatar/ServerAvatar';
 import OutlinedButton from '@components/Button/OutlinedButton';
 import StandardTab from '@components/Tab/StandardTab';