From c815e206807d5f426800805a99b63749d35ff546 Mon Sep 17 00:00:00 2001 From: seongminn Date: Fri, 1 Dec 2023 15:38:07 +0900 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=EC=9E=85=EB=A0=A5=20=EA=B0=92?= =?UTF-8?q?=EC=9D=B4=20=EB=B9=84=EC=97=88=EC=9D=84=20=EB=95=8C=20=EB=8C=93?= =?UTF-8?q?=EA=B8=80=20=EB=93=B1=EB=A1=9D=20=EB=B0=A9=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/match/CommentForm/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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(''); From 31dea516e1ce43e01d3ab79d85999e2278dbfce2 Mon Sep 17 00:00:00 2001 From: seongminn Date: Fri, 1 Dec 2023 15:39:04 +0900 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=EC=84=9C=EB=B2=84=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EB=AC=B4=ED=95=9C=20?= =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/match.ts | 8 +++---- src/app/page.tsx | 4 ++-- src/components/match/MatchList/index.tsx | 26 +++-------------------- src/queries/useMatchList/Fetcher.tsx | 18 +++------------- src/queries/useMatchList/query.ts | 27 +++++++++--------------- 5 files changed, 21 insertions(+), 62 deletions(-) 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/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, }; };