diff --git a/src/api/game.ts b/src/api/game.ts index cd4ccf7b..49ff1299 100644 --- a/src/api/game.ts +++ b/src/api/game.ts @@ -4,6 +4,7 @@ import { BalanceGame, Game, GameContent, + GameParams, GameSet, TempGame, } from '@/types/game'; @@ -61,21 +62,35 @@ export const getNewGames = async () => { }; export const getBestGames = async (tagName: string) => { + const params: GameParams = { + page: GAME_VALUE.PAGE, + size: GAME_VALUE.SIZE, + }; + + if (tagName !== '인기') { + params.tagName = tagName; + } + const { data } = await axiosInstance.get( `${END_POINT.BEST_GAME}`, - { - params: { tagName, page: GAME_VALUE.PAGE, size: GAME_VALUE.SIZE }, - }, + { params }, ); return data; }; export const getLatestGames = async (tagName: string) => { + const params: GameParams = { + page: GAME_VALUE.PAGE, + size: GAME_VALUE.SIZE, + }; + + if (tagName !== '인기') { + params.tagName = tagName; + } + const { data } = await axiosInstance.get( `${END_POINT.LATEST_GAME}`, - { - params: { tagName, page: GAME_VALUE.PAGE, size: GAME_VALUE.SIZE }, - }, + { params }, ); return data; }; diff --git a/src/hooks/api/game/useBestGameListQuery.ts b/src/hooks/api/game/useBestGameListQuery.ts index 8b64fe43..7d3468f7 100644 --- a/src/hooks/api/game/useBestGameListQuery.ts +++ b/src/hooks/api/game/useBestGameListQuery.ts @@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query'; import { GameContent } from '@/types/game'; import { getBestGames } from '@/api/game'; -export const useBestGameList = (tagName: string) => { +export const useBestGameList = (tagName: string, isEnabled: boolean) => { const { data: bestGames, isLoading } = useQuery({ queryKey: ['bestGames', tagName], queryFn: () => getBestGames(tagName), + enabled: isEnabled, }); return { bestGames, isLoading }; }; diff --git a/src/hooks/api/game/useLatestGameListQuery.ts b/src/hooks/api/game/useLatestGameListQuery.ts index 5ae4784f..ff20c9ac 100644 --- a/src/hooks/api/game/useLatestGameListQuery.ts +++ b/src/hooks/api/game/useLatestGameListQuery.ts @@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query'; import { GameContent } from '@/types/game'; import { getLatestGames } from '@/api/game'; -export const useLatestGameList = (tagName: string) => { +export const useLatestGameList = (tagName: string, isEnabled: boolean) => { const { data: latestGames, isLoading } = useQuery({ queryKey: ['latestGames', tagName], queryFn: () => getLatestGames(tagName), + enabled: isEnabled, }); return { latestGames, isLoading }; }; diff --git a/src/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx index 7a727514..7979912d 100644 --- a/src/pages/LandingPage/LandingPage.tsx +++ b/src/pages/LandingPage/LandingPage.tsx @@ -1,4 +1,4 @@ -import React, { useState, useMemo } from 'react'; +import React, { useState } from 'react'; import TopBanner from '@/components/molecules/TopBanner/TopBanner'; import SearchTagBar from '@/components/molecules/SearchTagBar/SearchTagBar'; import CategoryBox from '@/components/molecules/CategoryBox/CategoryBox'; @@ -26,15 +26,15 @@ const LandingPage = () => { '인기' | '커플' | '취향' | '월드컵' >('인기'); - const { bestGames } = useBestGameList(activeTab); - const { latestGames } = useLatestGameList(activeTab); + const isBestGamesEnabled = + activeTab === '인기' || selectedValue.field === 'views'; + const isLatestGamesEnabled = + activeTab !== '인기' && selectedValue.field !== 'views'; - const contents = useMemo(() => { - if (selectedValue.field === 'views') { - return bestGames || []; - } - return latestGames || []; - }, [selectedValue, bestGames, latestGames]); + const { bestGames } = useBestGameList(activeTab, isBestGamesEnabled); + const { latestGames } = useLatestGameList(activeTab, isLatestGamesEnabled); + + const contents = bestGames || latestGames || []; const handleService = () => { setIsServicePreparing(true); diff --git a/src/types/game.ts b/src/types/game.ts index 1c8e38e2..f20ffee3 100644 --- a/src/types/game.ts +++ b/src/types/game.ts @@ -50,6 +50,12 @@ export interface GamesPagination extends PaginationType { content: GameContent[]; } +export interface GameParams { + page: number; + size: number; + tagName?: string; +} + export interface BalanceGameOption { id: number; name: string;