Fix(client): 공연 정보 조회 무한 스크롤 해결 및 공연 개수 api 연결

apps/client/src/pages/search/hooks/use-search-data.ts

@@ -1,8 +1,7 @@
-import { useQuery } from '@tanstack/react-query';
-import {
-  SEARCH_ARTIST_QUERY_OPTION,
-  SEARCH_PERFORMANCES_QUERY_OPTION,
-} from '@shared/apis/search/search-queries';
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
+import { SEARCH_ARTIST_QUERY_OPTION } from '@shared/apis/search/search-queries';
+import { getPerformancesSearch } from '@shared/apis/search/search';
+import { GetPerformancesSearchResponse } from '@shared/types/search-reponse';
 
 interface UseArtistProps {
   keyword: string;
@@ -19,23 +18,33 @@ export const useSearchArtist = ({ keyword, enabled }: UseArtistProps) => {
 
 interface UsePerformancesProps {
   artistId: string;
-  cursor: number;
   enabled: boolean;
 }
 
 export const useSearchPerformances = ({
   artistId,
-  cursor,
   enabled,
 }: UsePerformancesProps) => {
-  const isQueryEnabled = !!artistId && enabled;
-  const { data } = useQuery({
-    ...SEARCH_PERFORMANCES_QUERY_OPTION.SEARCH_PERFORMANCES(
-      artistId,
-      cursor,
-      isQueryEnabled,
-    ),
-  });
+  const { data, fetchNextPage, hasNextPage, isFetchingNextPage } =
+    useInfiniteQuery({
+      queryKey: ['performances', artistId],
+      queryFn: ({ pageParam = 1 }: { pageParam?: number }) =>
+        getPerformancesSearch(artistId, pageParam),
+      enabled,
+      initialPageParam: 1,
+      getNextPageParam: (lastPage: GetPerformancesSearchResponse) => {
+        return lastPage.nextCursor !== -1 ? lastPage.nextCursor : undefined;
+      },
+    });
 
-  return data;
+  const performances = data?.pages.flatMap((page) => page.performances) || [];
+  const performanceCount = data?.pages[0]?.performanceCount || 0;
+
+  return {
+    performances,
+    performanceCount,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+  };
 };

apps/client/src/pages/search/page/search.tsx

@@ -6,6 +6,7 @@ import PerformanceSection from '@pages/search/components/performance-section';
 import PerformanceCount from '@pages/search/components/performance-count-section';
 import { useSearchLogic } from '../hooks/use-search-logic';
 import { useSearchPerformances } from '../hooks/use-search-data';
+import { useInfiniteScroll } from '@shared/utils/use-infinite-scroll';
 import ArtistNotFound from '../components/artist-not-found';
 
 const Search = () => {
@@ -20,12 +21,13 @@ const Search = () => {
   } = useSearchLogic();
 
   const artistId = artistData[0]?.artistId || '';
-  const performancesData = useSearchPerformances({
-    artistId,
-    cursor: 1,
-    enabled: !!artistId,
-  });
+  const { performances, performanceCount, fetchNextPage, hasNextPage } =
+    useSearchPerformances({
+      artistId,
+      enabled: !!artistId,
+    });
 
+  const observerRef = useInfiniteScroll(hasNextPage, fetchNextPage);
   const isLoading = !artistData || artistData.length === 0;
 
   const performances = performancesData?.performances || [];
@@ -40,26 +42,25 @@ const Search = () => {
         onBlur={handleOnBlur}
       />
       {!barFocus && paramsKeyword.length > 0 && (
-        <>
-          <main className={styles.resultSection}>
-            {isLoading ? (
-              <div />
-            ) : artistId ? (
-              <>
-                <NoticeSection
-                  isMultipleArtists={artistData[0]?.isMultipleArtists}
-                />
-                <ArtistSection artist={artistData} />
-                <Spacing />
-                <PerformanceCount count={performanceCount} />
-                <PerformanceSection performances={performances} />
-              </>
-            ) : (
-              <ArtistNotFound />
-            )}
-          </main>
-          <Footer />
-        </>
+    <>
+      <main className={styles.resultSection}>
+        {isLoading ? (
+          <div />
+        ) : artistId ? (
+          <>
+            <NoticeSection isMultipleArtists={artistData[0]?.isMultipleArtists} />
+            <ArtistSection artist={artistData} />
+            <Spacing />
+            <PerformanceCount count={performanceCount} />
+            <PerformanceSection performances={performances} />
+            {hasNextPage && <div ref={observerRef} style={{ height: '2rem' }} />}
+         </>
+        ) : (
+         <ArtistNotFound />
+       )}
+      </main>
+      <Footer />
+    </>
       )}
     </>
   );

apps/client/src/pages/time-table/page/add-festival.tsx

@@ -53,7 +53,7 @@ const AddFestival = () => {
             />
           );
         })}
-        {hasNextPage && <div ref={observerRef} style={{ height: '20px' }} />}
+        {hasNextPage && <div ref={observerRef} style={{ height: '2rem' }} />}
       </div>
       <div className={styles.buttonSection}>
         <Button

apps/client/src/shared/apis/search/search-queries.ts

@@ -1,5 +1,6 @@
 import { queryOptions } from '@tanstack/react-query';
 import { getArtistSearch, getPerformancesSearch } from './search';
+import { GetPerformancesSearchResponse } from '@shared/types/search-reponse';
 
 export const SEARCH_ARTIST_QUERY_KEY = {
   ALL: ['artist'],
@@ -30,17 +31,14 @@ export const SEARCH_PERFORMANCES_QUERY_KEY = {
 } as const;
 
 export const SEARCH_PERFORMANCES_QUERY_OPTION = {
-  ALL: () => queryOptions({ queryKey: SEARCH_PERFORMANCES_QUERY_KEY.ALL }),
-  SEARCH_PERFORMANCES: (
-    artistId: string,
-    cursor: number,
-    enabled: boolean,
-  ) => ({
-    queryKey: SEARCH_PERFORMANCES_QUERY_KEY.SEARCH_PERFORMANCES(
-      artistId,
-      cursor,
-    ),
-    queryFn: () => getPerformancesSearch(artistId, cursor),
+  SEARCH_PERFORMANCES: (artistId: string, enabled: boolean) => ({
+    queryKey: ['performances', artistId],
+    queryFn: ({ pageParam = 1 }: { pageParam?: number }) =>
+      getPerformancesSearch(artistId, pageParam),
     enabled,
+    initialPageParam: 1,
+    getNextPageParam: (lastPage: GetPerformancesSearchResponse) => {
+      return lastPage.nextCursor !== -1 ? lastPage.nextCursor : undefined;
+    },
   }),
 };

apps/client/src/shared/apis/search/search.ts

@@ -19,10 +19,8 @@ export const getPerformancesSearch = async (
   artistId: string,
   cursor: number,
 ): Promise<GetPerformancesSearchResponse> => {
-  const url =
-    cursor === 1
-      ? `performances/association/${artistId}`
-      : `performances/association/${artistId}?cursor=${cursor}`;
+  const baseUrl = `performances/association/${artistId}`;
+  const url = cursor === 1 ? baseUrl : `${baseUrl}?cursor=${cursor}`;
 
   const response = await get<BaseResponse<GetPerformancesSearchResponse>>(url);
   return response.data;

apps/client/src/shared/types/search-reponse.ts

@@ -23,5 +23,6 @@ export interface Performance {
 
 export interface GetPerformancesSearchResponse {
   nextCursor: number;
+  performanceCount: number;
   performances: Performance[];
 }