refactor : rank Api querykey factor

- #867

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, 'today-rank', param] as const,
+  continuousAttendanceRank: () => [...attendanceKeys.base, 'continuous-rank'] as const,
 };
 
 const useGetTodayAttendancePointQuery = () => {
@@ -36,4 +46,29 @@ 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 fetcher = () =>
+    axios
+      .get('/attendances/today-rank', {
+        params: { page, size },
+      })
+      .then(({ data }) => data);
+
+  return useQuery<TodayAttendRank>(attendanceKeys.todayAttendanceRank({ page, size }), 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 = {
+  base: ['member'] as const,
   memberList: ['member', 'memberList'] as const,
+  pointRank: (param: PageAndSize) => [...memberKeys.base, 'point_rank', param] as const,
 };
 const profileKeys = {
   profileInfo: (memberId: number) => ['profile', 'profileInfo', memberId] as const,
@@ -191,6 +193,14 @@ const useDeleteMemberMutation = () => {
   });
 };
 
+const useGetPointRank = ({ page, size = 10 }: PageAndSize) => {
+  const fetcher = () => axios.get('/members/point-rank', { params: { page, size } }).then(({ data }) => data);
+
+  return useQuery<PointRank>(memberKeys.pointRank({ page, size }), fetcher, {
+    keepPreviousData: true,
+  });
+};
+
 export {
   useGetMembersQuery,
   useGetProfileQuery,
@@ -204,4 +214,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';