Merge pull request #123 from hufs-sports-live/fix/remove-match-list-i…

…nfinite-scroll [FIX] 무한 스크롤 제거
HiimKwak · Dec 1, 2023 · 838f0ab · 838f0ab
2 parents 217f7f5 + 31dea51
commit 838f0ab
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 64 deletions.
diff --git a/src/api/match.ts b/src/api/match.ts
@@ -17,15 +17,13 @@ export type MatchListParams = {
   sport_id?: string[];
   status: MatchStatus;
   league_id?: string;
-  cursor?: number;
+  // cursor?: number;
 };
 
-export const getMatchList = async ({ cursor, ...params }: MatchListParams) => {
+export const getMatchList = async ({ ...params }: MatchListParams) => {
   const queryString = convertObjectToQueryString(params);
 
-  const { data } = await instance.get<MatchListType[]>(
-    `games?${queryString}&cursor=${cursor || ''}`,
-  );
+  const { data } = await instance.get<MatchListType[]>(`games?${queryString}`);
 
   return data;
 };

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -75,9 +75,9 @@ export default function Home() {
         loadingFallback={<MatchList.Skeleton />}
       >
         <MatchListFetcher {...paramsObj}>
-          {({ matchList, ...props }) => (
+          {({ matchList }) => (
             <div className="flex w-full flex-col gap-8">
-              <MatchList matchList={matchList.pages.flat()} {...props} />
+              <MatchList matchList={matchList} />
             </div>
           )}
         </MatchListFetcher>

diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx
@@ -1,5 +1,5 @@
 import { UseMutateFunction } from '@tanstack/react-query';
-import { ChangeEvent, FormEvent, Fragment, useState } from 'react';
+import { ChangeEvent, FormEvent, useState } from 'react';
 
 import { MatchCommentPayload, MatchTeamType } from '@/types/match';
 import { $ } from '@/utils/core';
@@ -35,7 +35,7 @@ export default function CommentForm({
   ) => {
     e.preventDefault();
 
-    if (inputValue.trim() === '') return;
+    if (!payload.content.trim()) return;
 
     mutate({ ...payload, gameTeamId: selectedTeamId });
     setInputValue('');

diff --git a/src/components/match/MatchList/index.tsx b/src/components/match/MatchList/index.tsx
@@ -9,45 +9,26 @@ import {
   COMMON_ERROR_MESSAGE,
   MATCH_LIST_API_ERROR_MESSAGE,
 } from '@/constants/error';
-import useIntersect from '@/hooks/useInfiniteObserver';
 import { MatchListType } from '@/types/match';
 
 type MatchListProps = {
   matchList: MatchListType[];
-  hasNextPage: boolean;
-  fetchNextPage: () => void;
-  isFetching: boolean;
 };
 
-export default function MatchList({
-  matchList,
-  fetchNextPage,
-  hasNextPage,
-  isFetching,
-}: MatchListProps) {
-  const { ref } = useIntersect<HTMLDivElement>(async (entry, observer) => {
-    if (entry.isIntersecting) {
-      observer.unobserve(entry.target);
-
-      if (hasNextPage && !isFetching) {
-        fetchNextPage();
-      }
-    }
-  });
-
+export default function MatchList({ matchList }: MatchListProps) {
   return (
     <>
       <ul>
         {matchList.map(({ id, sportsName, ...match }) => (
           <>
             {sportsName === '루미큐브' ? (
-              <li key={id} className="mb-14">
+              <li key={match.startTime + id} className="mb-14">
                 <Link href={`rummikube/${id}`}>
                   <RummiKubMatchItem {...match} sportsName={sportsName} />
                 </Link>
               </li>
             ) : (
-              <li key={id} className="mb-14">
+              <li key={match.startTime + id} className="mb-14">
                 <Link href={`match/${id}`}>
                   <MatchCard
                     {...match}
@@ -82,7 +63,6 @@ export default function MatchList({
           </>
         ))}
       </ul>
-      <div ref={ref}></div>
     </>
   );
 }

diff --git a/src/queries/useMatchList/Fetcher.tsx b/src/queries/useMatchList/Fetcher.tsx
@@ -1,4 +1,3 @@
-import { InfiniteData } from '@tanstack/react-query';
 import { ReactNode } from 'react';
 
 import { MatchListParams } from '@/api/match';
@@ -8,27 +7,16 @@ import { useMatchList } from './query';
 
 interface MatchListFetcherProps
   extends Omit<MatchListParams, 'cursor' | 'size'> {
-  children: ({
-    matchList,
-    hasNextPage,
-    fetchNextPage,
-    isFetching,
-  }: {
-    matchList: InfiniteData<MatchListType[]>;
-    hasNextPage: boolean;
-    fetchNextPage: () => void;
-    isFetching: boolean;
-  }) => ReactNode;
+  children: ({ matchList }: { matchList: MatchListType[] }) => ReactNode;
 }
 
 export default function MatchListFetcher({
   children,
   ...props
 }: MatchListFetcherProps) {
-  const { matchList, error, hasNextPage, fetchNextPage, isFetching } =
-    useMatchList(props);
+  const { matchList, error } = useMatchList(props);
 
   if (error) throw error;
 
-  return children({ matchList, hasNextPage, fetchNextPage, isFetching });
+  return children({ matchList });
 }
diff --git a/src/queries/useMatchList/query.ts b/src/queries/useMatchList/query.ts
@@ -1,4 +1,4 @@
-import { useSuspenseInfiniteQuery } from '@tanstack/react-query';
+import { useSuspenseQuery } from '@tanstack/react-query';
 
 import { getMatchList, MatchListParams } from '@/api/match';
 
@@ -7,25 +7,18 @@ export const useMatchList = ({
   status = 'playing',
   league_id,
 }: Omit<MatchListParams, 'cursor' | 'size'>) => {
-  const { data, error, isFetching, hasNextPage, fetchNextPage } =
-    useSuspenseInfiniteQuery({
-      queryKey: ['match-list', sport_id, status, league_id],
-      queryFn: ({ pageParam }) =>
-        getMatchList({
-          sport_id,
-          status,
-          league_id,
-          cursor: pageParam,
-        }),
-      initialPageParam: 0,
-      getNextPageParam: lastPage => lastPage.at(-1)?.id || null,
-    });
+  const { data, error } = useSuspenseQuery({
+    queryKey: ['match-list', sport_id, status, league_id],
+    queryFn: () =>
+      getMatchList({
+        sport_id,
+        status,
+        league_id,
+      }),
+  });
 
   return {
     matchList: data,
     error,
-    isFetching,
-    hasNextPage,
-    fetchNextPage,
   };
 };