refactor: 변경된 밸런스게임 조회 api 파라미터 수정 (#264)

* [style] : mobile typo 정의 및 Header mobile svg 추가

* [feat] : viewport 메타 태그 추가 및 미디어 쿼리 기본 스타일 적용

* [feat] : LandingPage에 사용되는 모바일 svg 추가

* [feat] : 모바일 Button 컴포넌트 구현

* [style] : 모바일 typo 추가

* [feat] : BalanceGameCategory 관련 모바일 스타일 추가

* [feat] : CategoryBox 관련 모바일 스타일 추가

* [feat] : SearchBar 모바일 스타일 추가

* [feat] : ContentsButton 모바일 스타일 추가

* [feat] : TopBanner 모바일 스타일 추가

* [feat] : 모바일 layout 정의

* [feat] : Mobile 컴포넌트 관련 svg 파일 추가

* [feat] : LandingPage 속 새로운 mobile 컴포넌트 UI 및 스토리북 구현

* [feat] : BalanceGameList 관련 모바일 스타일 추가

* [style] MobileCreateButton hover style 및 배경 색상 추가

* [feat] useIsMobile 훅 구현 및 반응형 적용

* [refactor] : 모바일 UI 컴포넌트 폴더 구조 변경 및 적용

* [feat] : DraftSaveButton 컴포넌트 UI 및 스토리북 구현

* [chore] : 모바일 UI 관련 폴더 구조 정리 및 파일 이동

* [refactor] : 스토리북 통일을 위해 Default/All로 수정

* [refactor] : 모바일 UI 스토리북 폴더 구조 수정

* [refactor] : TopBanner 모바일 dotStyling 수정

* [refactor] : 레이아웃 공백 요소의 불필요한 ARIA role 제거 및 접근성 개선

* [refactor] : 접근성 개선을 위한 aria-hidden 추가

* Update src/components/mobile/molecules/MobileCreateDropdown/MobileCreateDropdown.tsx

Co-authored-by: Banana_milk <101927445+WonJuneKim@users.noreply.github.com>

* [refactor] accessToken 타입 처리 개선

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* [refactor] : 로그인 핸들러 중복 로직 제거 및 개선

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* [style] typo 누락 스타일 추가

* [refactor] : 컴포넌트 네이밍 수정

* [refactor] : 스토리북 속 porps 일부 action 적용

* [refactor] : 컴포넌트 네이밍 수정 및 적용

* [refactor] : 로그인 핸들러 중첩 함수 오류 수정

* [refactor] : 사용자 에이전트 문자열 검사 로직 개선

* [refactor] : 사용자 에이전트 문자열 검사 로직 수정

* [refactor] : 모바일 토글 defaultItem을 통해 종속성 제거

* [refactor] : 태그 제거 및 cosole 함수 action 기능으로 수정

* [refactor] : 인코딩 처리 명시

* [feat] : storybook custom viewport를 통해 모바일 UI 스토리북 구현

* [refactor] : 수정된 props 반영

* [refactor] : 밸런스게임 조회 파라미터 '인기' 태그에 대한 수정

* [refactor] : 밸런스게임 태그 상태값 수정 및 적용

* [refactor] : 밸런스 게임에 대한 인기순/최신순 api 동시 호출 분리

* [refactor] : activeTab의 기본값을 빈 문자열에서 '인기'로 변경하고 tagName 처리 로직 수정

* [refactor] : params 타입을 GameParams로 정의 및 조건 수정

* [refactor] : enabled 옵션을 통한 조건부 데이터 패칭 로직 수정

---------

Co-authored-by: Banana_milk <101927445+WonJuneKim@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

Author: 3 people

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<GameContent[]>(
     `${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<GameContent[]>(
     `${END_POINT.LATEST_GAME}`,
-    {
-      params: { tagName, page: GAME_VALUE.PAGE, size: GAME_VALUE.SIZE },
-    },
+    { params },
   );
   return data;
 };

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<GameContent[]>({
     queryKey: ['bestGames', tagName],
     queryFn: () => getBestGames(tagName),
+    enabled: isEnabled,
   });
   return { bestGames, isLoading };
 };

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<GameContent[]>({
     queryKey: ['latestGames', tagName],
     queryFn: () => getLatestGames(tagName),
+    enabled: isEnabled,
   });
   return { latestGames, isLoading };
 };

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);

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;