diff --git a/src/api/match.ts b/src/api/match.ts index 2b98ddd..626247b 100644 --- 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( - `games?${queryString}&cursor=${cursor || ''}`, - ); + const { data } = await instance.get(`games?${queryString}`); return data; }; diff --git a/src/app/page.tsx b/src/app/page.tsx index b1709ce..fa31f9f 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -75,9 +75,9 @@ export default function Home() { loadingFallback={} > - {({ matchList, ...props }) => ( + {({ matchList }) => (
- +
)}
diff --git a/src/components/match/CommentForm/index.tsx b/src/components/match/CommentForm/index.tsx index b9a8b4f..45b8816 100644 --- 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 index c0e58bd..2e89d48 100644 --- 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(async (entry, observer) => { - if (entry.isIntersecting) { - observer.unobserve(entry.target); - - if (hasNextPage && !isFetching) { - fetchNextPage(); - } - } - }); - +export default function MatchList({ matchList }: MatchListProps) { return ( <>
    {matchList.map(({ id, sportsName, ...match }) => ( <> {sportsName === '루미큐브' ? ( -
  • +
  • ) : ( -
  • +
  • ))}
-
); } diff --git a/src/queries/useMatchList/Fetcher.tsx b/src/queries/useMatchList/Fetcher.tsx index 3501b49..a00b753 100644 --- 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 { - children: ({ - matchList, - hasNextPage, - fetchNextPage, - isFetching, - }: { - matchList: InfiniteData; - 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 index 009996d..e9f0830 100644 --- 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) => { - 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, }; };