FE-32 검색 페이지 무한 스크롤 오류 수정

src/components/Header/Header.tsx

@@ -68,7 +68,7 @@ function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareI
 
   return (
     <nav className='bg-white h-13 px-6 py-4 md:px-28 md:py-5 lg:px-30 lg:py-6'>
-      <div className='container flex justify-between items-center'>
+      <div className='container max-w-screen-xl mx-auto flex justify-between items-center'>
         <div className='flex items-center space-x-4'>
           {icon === 'back' && (
             <button className='w-5 h-5 lg:w-9 lg:h-9' type='button' onClick={handleBack} aria-label='뒤로가기 버튼'>

src/components/search/SearchResults.tsx

@@ -51,20 +51,16 @@ function SearchResults({ results, query, isLoading }: SearchResultsProps) {
   }, [results, query]);
 
   const filteredResults = useMemo(
-    () => sortedResults.filter((item) => item.content.includes(query) || item.author.includes(query) || item.tags.some((tag) => tag.name.includes(query))),
+    () =>
+      sortedResults.filter(
+        (item) =>
+          item.content.toLowerCase().includes(query.toLowerCase()) ||
+          item.author.toLowerCase().includes(query.toLowerCase()) ||
+          item.tags.some((tag) => tag.name.toLowerCase().includes(query.toLowerCase())),
+      ),
     [sortedResults, query],
   );
 
-  if (isLoading) {
-    return (
-      <div className='flex flex-col py-4 px-6 lg:p-6 gap-2 lg:gap-[16px]'>
-        <div className='flex flex-col gap-1 md:gap-2 lg:gap-6'>
-          <span className='text-black-600 font-iropkeBatang iropke-lg lg:iropke-xl'>검색 결과를 불러오는 중 입니다...</span>
-        </div>
-      </div>
-    );
-  }
-
   if (!results || filteredResults.length === 0) {
     return (
       <div className='flex flex-col py-4 px-6 lg:p-6 gap-2 lg:gap-[16px]'>
@@ -94,6 +90,7 @@ function SearchResults({ results, query, isLoading }: SearchResultsProps) {
           </div>
         </Link>
       ))}
+      {isLoading && <div className='flex justify-center py-4'>로딩 중...</div>}
     </div>
   );
 }

src/hooks/useGetEpigramsHooks.ts

@@ -1,13 +1,24 @@
-import { useQuery } from '@tanstack/react-query';
-import getEpigrams from '@/apis/getEpigrams';
+import { useInfiniteQuery, QueryFunctionContext, QueryKey } from '@tanstack/react-query';
 import { GetEpigramsResponseType } from '@/schema/epigrams';
+import getEpigrams from '@/apis/getEpigrams';
+
+type EpigramsQueryKey = [string, string];
+
+const fetchEpigrams = async ({ pageParam = 0, queryKey }: QueryFunctionContext<EpigramsQueryKey>): Promise<GetEpigramsResponseType> => {
+  const [, keyword] = queryKey;
+  const cursor = typeof pageParam === 'number' ? pageParam : undefined;
+  const response = await getEpigrams({ keyword, limit: 10, cursor });
+  return response;
+};
 
-const useEpigrams = (query: string, page: number, limit: number = 10) =>
-  useQuery<GetEpigramsResponseType, Error>({
-    queryKey: ['epigrams', query, page, limit],
-    queryFn: () => getEpigrams({ keyword: query, limit, cursor: page * limit }),
-    enabled: !!query,
-    staleTime: 5 * 60 * 1000, // 데이터 신선도 설정
+const useEpigrams = (currentSearch: string) =>
+  useInfiniteQuery<GetEpigramsResponseType, Error>({
+    queryKey: ['epigrams', currentSearch] as unknown as QueryKey,
+    queryFn: fetchEpigrams as unknown as ({ pageParam, queryKey }: QueryFunctionContext<QueryKey>) => Promise<GetEpigramsResponseType>,
+    getNextPageParam: (lastPage) => lastPage.nextCursor,
+    initialPageParam: 0,
+    enabled: !!currentSearch,
+    staleTime: 5 * 60 * 1000,
   });
 
 export default useEpigrams;