[Others] 예정 진행중 토너먼트 데이터 fetching 리팩토링 #1024 (#1218)

* [Fix] 진행중인 토너먼트 없을 시 '0' 렌더링 수정 #1173 * [Chore] 파일 경로 변경 #1173 * [Feat] boucing dots UI 컴포넌트 추가 #1173 * [Feat] bouncing dots 컴포넌트 추가 #1173 * [Style] 패자 어두운 오버레이 적용 #1173 * [Refactor] 사용하지 않는 Import 제거 * [Feat] 경기 상태에 따른 bouncing dots UI 표시 #1173 * [Refactor] before, live 데이터를 분리하여 반환하도록 수정 #1204 * [Chore] 디렉토리 삭제 #1204 * [Chore] 미사용 컴포넌트 제거 #1204 * [Refactor] 의존성배열 수정, 참가 상태 문자열 수정 #1204 * [Refactor] 리턴 타입 명시 #1204 * [Refactor] 예정&진행중인 토너먼트 data fetching 커스텀훅 적용 #1204 * [Style] noTournamentText 색상 및 폰트 사이즈 조정 #1204 * [Style] gap 및 폰트 사이즈 수정 #1204
42organization · Jan 1, 2024 · ea3c625 · ea3c625
1 parent a758f34
commit ea3c625
Show file tree

Hide file tree

Showing 11 changed files with 107 additions and 205 deletions.
diff --git a/components/main/Section.tsx b/components/main/Section.tsx
@@ -2,7 +2,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 import { FaChevronRight } from 'react-icons/fa';
 import GameResult from 'components/game/GameResult';
-import TournamentPreview from 'components/main/TournamentPreview/TournamentPreview';
+import TournamentPreview from 'components/main/TournamentPreview';
 import RankListMain from 'components/rank/topRank/RankListMain';
 import styles from 'styles/main/Section.module.scss';
 

diff --git a/...n/TournamentPreview/TournamentPreview.tsx → components/main/TournamentPreview.tsx b/...n/TournamentPreview/TournamentPreview.tsx → components/main/TournamentPreview.tsx
@@ -1,24 +1,26 @@
 import { useRouter } from 'next/router';
 import { useState, useRef } from 'react';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
-import { TournamentInfo } from 'types/tournamentTypes';
 import TournamentCard from 'components/tournament/TournamentCard';
 import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamentData';
 import useInterval from 'hooks/useInterval';
-import styles from 'styles/main/TournamentPreview/TournamentPreview.module.scss';
-import TournamentPreviewItem from './TournamentPreviewItem';
+import styles from 'styles/main/TournamentPreview.module.scss';
 
 export default function TournamentPreview() {
-  const data: TournamentInfo[] | undefined = useBeforeLiveTournamentData();
+  const { data } = useBeforeLiveTournamentData();
   const [selectedIndex, setSelectedIndex] = useState<number>(0);
   const virtuoso = useRef<VirtuosoHandle>(null);
   const router = useRouter();
 
+  const dataCombined = data
+    ? [...data.beforeTournament, ...data.liveTournament]
+    : [];
+
   useInterval(() => {
-    if (!data || data?.length === 0) {
+    if (!data || dataCombined.length === 0) {
       return;
     }
-    const nextIndex = (selectedIndex + 1) % data.length;
+    const nextIndex = (selectedIndex + 1) % dataCombined.length;
     setSelectedIndex(nextIndex);
     if (virtuoso.current !== null) {
       virtuoso.current.scrollToIndex({
@@ -34,18 +36,16 @@ export default function TournamentPreview() {
       className={styles.rollingBanner}
       onClick={() => router.push('tournament')}
     >
-      {data && data.length > 0 && (
-        <Virtuoso
-          className={styles.virtuoso}
-          totalCount={data.length}
-          data={data}
-          ref={virtuoso}
-          itemContent={(index) => (
-            <TournamentCard {...data[index]} page='main' />
-          )}
-          style={{ height: '100%' }}
-        />
-      )}
+      <Virtuoso
+        className={styles.virtuoso}
+        totalCount={dataCombined.length}
+        data={dataCombined}
+        ref={virtuoso}
+        itemContent={(index) => (
+          <TournamentCard {...dataCombined[index]} page='main' />
+        )}
+        style={{ height: '100%' }}
+      />
     </div>
   );
 }
diff --git a/components/main/TournamentPreview/TournamentPreviewItem.tsx b/components/main/TournamentPreview/TournamentPreviewItem.tsx
diff --git a/components/tournament/TournamentCard.tsx b/components/tournament/TournamentCard.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { BiCalendar } from 'react-icons/bi';
 import { MdPeopleAlt } from 'react-icons/md';
@@ -47,7 +47,7 @@ export default function TournamentCard({
     });
   };
 
-  const getTournamentInfo = useCallback(() => {
+  const getTournamentInfo = useCallback(async () => {
     return instance
       .get(`/pingpong/tournaments/${tournamentId}`)
       .then((res) => {
@@ -57,16 +57,9 @@ export default function TournamentCard({
       .catch((error) => {
         setError('JJH2');
       });
-  }, [tournamentId]);
+  }, [tournamentId, setError]);
 
-  useEffect(() => {
-    if (modal.modalName === null) {
-      getTournamentInfo();
-      getStatus();
-    }
-  }, [modal]);
-
-  const getStatus = useCallback(() => {
+  const getStatus = useCallback(async () => {
     return instance
       .get(`/pingpong/tournaments/${tournamentId}/users`)
       .then((res) => {
@@ -79,12 +72,20 @@ export default function TournamentCard({
   }, []);
 
   const start = dateToKRLocaleTimeString(new Date(startTime));
+
+  useEffect(() => {
+    if (modal.modalName === null) {
+      getTournamentInfo();
+      getStatus();
+    }
+  }, [modal, getStatus, getTournamentInfo]);
+
   const end = dateToKRLocaleTimeString(new Date(endTime));
   const isFull = playerCount === 8 ? 'full' : 'notFull';
 
   const userState: Record<string, string> = {
-    BEFORE: '참여하기!',
-    PLAYER: '참여 중',
+    BEFORE: '참가하기!',
+    PLAYER: '참가 중',
     WAIT: '대기 중',
   };
 

diff --git a/hooks/tournament/useBeforeLiveTournamentData.ts b/hooks/tournament/useBeforeLiveTournamentData.ts
@@ -5,31 +5,42 @@ import { TournamentInfo } from 'types/tournamentTypes';
 import { instance } from 'utils/axios';
 import { errorState } from 'utils/recoil/error';
 
-export default function useBeforeLiveTournamentData() {
+type UseBeforeLiveTournamentDataReturn = {
+  data:
+    | {
+        beforeTournament: TournamentInfo[];
+        liveTournament: TournamentInfo[];
+      }
+    | undefined;
+  isLoading: boolean;
+};
+
+export default function useBeforeLiveTournamentData(): UseBeforeLiveTournamentDataReturn {
   const setError = useSetRecoilState(errorState);
   const fetchTournamentData = useCallback(async () => {
-    const liveRes = await instance.get(
-      '/pingpong/tournaments?page=1&status=LIVE'
-    );
     const beforeRes = await instance.get(
       '/pingpong/tournaments?page=1&status=BEFORE'
     );
-    const combinedData = [
-      ...liveRes.data.tournaments,
-      ...beforeRes.data.tournaments,
-    ];
-    return combinedData;
+    const liveRes = await instance.get(
+      '/pingpong/tournaments?page=1&status=LIVE'
+    );
+    return {
+      beforeTournament: beforeRes.data.tournaments,
+      liveTournament: liveRes.data.tournaments,
+    };
   }, []);
 
-  const { data, isError } = useQuery<TournamentInfo[]>(
-    'beforeLiveTournamentData',
-    fetchTournamentData,
-    { retry: 1, staleTime: 60000 }
-  );
+  const { data, isLoading, isError } = useQuery<{
+    beforeTournament: TournamentInfo[];
+    liveTournament: TournamentInfo[];
+  }>('beforeLiveTournamentData', fetchTournamentData, {
+    retry: 1,
+    staleTime: 60000,
+  });
 
   if (isError) {
     setError('JC04');
   }
 
-  return data;
+  return { data, isLoading };
 }
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -5,13 +5,16 @@ import useBeforeLiveTournamentData from 'hooks/tournament/useBeforeLiveTournamen
 import styles from 'styles/main/Home.module.scss';
 
 const Home: NextPage = () => {
-  const tournamentData = useBeforeLiveTournamentData();
+  const { data: tournamentData } = useBeforeLiveTournamentData();
+
   return (
     <div className={styles.container}>
       <SearchBar />
-      {tournamentData && tournamentData?.length > 0 && (
-        <Section path='tournament' sectionTitle={'Tournament'} />
-      )}
+      {tournamentData &&
+        (tournamentData.beforeTournament?.length > 0 ||
+          tournamentData.liveTournament?.length > 0) && (
+          <Section path='tournament' sectionTitle={'Tournament'} />
+        )}
       <Section path='rank' sectionTitle={'Ranking'} />
       <Section path='game' sectionTitle={'Current Play'} />
     </div>