Merge pull request #69 from FinalDoubleTen/FE-52--QA/Search

검색기능 QA 대응
WePlanPlans · Jan 6, 2024 · 10cd829 · 10cd829
2 parents c580e6a + c8f5409
commit 10cd829
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 49 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,16 @@
 <!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>위플플 | 여정 공유 플랫폼</title>
-</head>
-
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0 maximum-scale=1" />
+    <title>위플플 | 여정 공유 서비스</title>
+  </head>
 <body>
   <div id="root"></div>
   <script type="module" src="/src/main.tsx"></script>
 </body>
+</html>
 
-</html>
diff --git a/src/components/search/RegionSelect.tsx b/src/components/search/RegionSelect.tsx
@@ -1,23 +1,34 @@
 import { AREA_CODE } from '@/constants';
 import { ToggleValue } from '@components/common/toggleGroup/ToggleValue';
 import { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 export const RegionSelect = ({}) => {
   const navigate = useNavigate();
+  const location = useLocation();
+
   const [selectedRegion, setSelectedRegion] = useState('');
   // 지역값 쿼리스트링으로 저장
   const onRegionSelect = (value: string) => {
+    const queryParams = new URLSearchParams(location.search);
+
     if (value === selectedRegion) {
-      navigate('?');
+      queryParams.delete('region');
       setSelectedRegion('');
     } else {
-      navigate(`?region=${encodeURIComponent(value)}`);
+      queryParams.set('region', value);
       setSelectedRegion(value);
     }
+
+    navigate(
+      {
+        pathname: location.pathname,
+        search: queryParams.toString(),
+      },
+      { replace: true },
+    );
   };
 
-  console.log('');
   return (
     <ToggleValue values={Object.values(AREA_CODE)} onToggle={onRegionSelect} />
   );

diff --git a/src/components/search/ResultCategory.tsx b/src/components/search/ResultCategory.tsx
@@ -1,5 +1,4 @@
 import { ButtonWhite } from '@components/common/button/Button';
-
 import { ResultItem } from './ResultItem';
 import { TourType } from '@/@types/tours.types';
 import { InfiniteQueryObserverResult } from '@tanstack/react-query';
@@ -9,13 +8,15 @@ interface ResultCategoryProps {
   category: string;
   fetchNextPage: (() => Promise<InfiniteQueryObserverResult<any, any>>) | null;
   hasNextPage: boolean;
+  isFetchingNextPage: boolean;
 }
 
 export const ResultCategory = ({
   data,
   category,
   fetchNextPage,
   hasNextPage,
+  isFetchingNextPage,
 }: ResultCategoryProps) => {
   // console.log('hasNextPage', hasNextPage);
   return (
@@ -24,14 +25,18 @@ export const ResultCategory = ({
       {data.map((item) => (
         <ResultItem key={item.id} result={item} />
       ))}
-      {hasNextPage ? (
+      {hasNextPage && !isFetchingNextPage ? (
         <ButtonWhite
           className="my-2"
           onClick={() => fetchNextPage && fetchNextPage()}>
           더보기
         </ButtonWhite>
+      ) : isFetchingNextPage ? (
+        <ButtonWhite className="my-2" disabled>
+          Loading...
+        </ButtonWhite>
       ) : (
-        <div className="mt-3 text-center text-gray3">검색 결과의 끝입니다.</div>
+        <div className="mt-3 text-center text-gray3"></div>
       )}
     </>
   );

diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx
@@ -8,7 +8,21 @@ const SearchInput = () => {
   const navigate = useNavigate();
 
   const goBack = () => {
-    navigate(-1);
+    const currentPath = window.location.pathname;
+    const queryParams = new URLSearchParams(window.location.search);
+
+    if (currentPath === '/search') {
+      if (queryParams.has('searchWord')) {
+        navigate('/search');
+        return;
+      } else if (queryParams.has('region')) {
+        navigate('/');
+        return;
+      }
+      navigate('/');
+    } else {
+      navigate(-1);
+    }
   };
 
   const clearInput = () => {
@@ -47,6 +61,7 @@ const SearchInput = () => {
           value={inputValue}
           onChange={handleChange}
           onKeyPress={handleKeyPress}
+          autoFocus
         />
         {inputValue && (
           <div

diff --git a/src/components/search/SearchResult.tsx b/src/components/search/SearchResult.tsx
@@ -29,29 +29,33 @@ export const SearchResult = ({
   }, [searchWord]);
   console.log();
 
-  const { data, fetchNextPage, hasNextPage, isLoading, isError } =
-    useInfiniteQuery({
-      queryKey: ['searchResults', selectedRegion, searchWord, selectedCategory],
-      queryFn: ({ pageParam = 0 }) =>
-        getToursSearch({
-          region: selectedRegion || '',
-          searchWord: searchWord,
-          category: selectedCategory !== '전체' ? selectedCategory : undefined,
-          page: pageParam,
-          size: 10,
-        }),
-      initialPageParam: 0,
-      getNextPageParam: (lastPage, allPages) => {
-        // 'last' 필드가 false이면, 다음 페이지가 존재함
-        if (!lastPage.data.last) {
-          // 다음 페이지 번호 반환
-          return allPages.length + 1;
-        }
-        // 그렇지 않으면, 더 이상 페이지가 없으므로 undefined 반환
-        return undefined;
-      },
-      enabled: !!searchWord,
-    });
+  const {
+    data,
+    fetchNextPage,
+    hasNextPage,
+    isLoading,
+    isError,
+    isFetchingNextPage,
+  } = useInfiniteQuery({
+    queryKey: ['searchResults', selectedRegion, searchWord, selectedCategory],
+    queryFn: ({ pageParam = 0 }) =>
+      getToursSearch({
+        region: selectedRegion || '',
+        searchWord: searchWord,
+        category: selectedCategory !== '전체' ? selectedCategory : undefined,
+        page: pageParam,
+        size: 10,
+      }),
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, allPages) => {
+      if (!lastPage.data.data.last) {
+        return allPages.length;
+      }
+      return undefined;
+    },
+    enabled: !!searchWord,
+    retry: 2,
+  });
 
   if (isLoading) {
     return <Spinner />;
@@ -60,11 +64,10 @@ export const SearchResult = ({
     console.log('error fetching search result ');
   }
 
-  console.log('hasNextPage', hasNextPage);
-
-  const searchResults = data?.pages.flatMap((page) => page.data.data.content);
-  // const searchOptions = data?
+  const searchResults =
+    data?.pages.flatMap((page) => page.data.data.content) || [];
   console.log('searchResults', searchResults);
+  const noResults = searchResults && searchResults.length === 0;
 
   return (
     <>
@@ -82,15 +85,26 @@ export const SearchResult = ({
           />
         ))}
       </div>
-      {searchResults ? (
+      {/* {searchResults ? (
         <ResultCategory
           data={searchResults}
           category={selectedCategory}
           fetchNextPage={hasNextPage ? fetchNextPage : null}
           hasNextPage={hasNextPage}
         />
       ) : (
-        <div>검색결과가 없습니다.</div>
+        <div className="mt-3 text-center text-gray3">검색결과가 없습니다.</div>
+      )} */}
+      {noResults ? (
+        <div className="my-10 text-center text-gray3">검색결과가 없습니다.</div>
+      ) : (
+        <ResultCategory
+          data={searchResults}
+          category={selectedCategory}
+          fetchNextPage={hasNextPage ? fetchNextPage : null}
+          hasNextPage={hasNextPage}
+          isFetchingNextPage={isFetchingNextPage}
+        />
       )}
     </>
   );

diff --git a/src/pages/search/search.page.tsx b/src/pages/search/search.page.tsx
@@ -9,6 +9,8 @@ export const Search = () => {
 
   const queryParams = new URLSearchParams(location.search);
   const regionFromQuery = queryParams.get('region');
+  const searchWordFromQuery = queryParams.get('searchWord');
+
   const [selectedRegion, setSelectedRegion] = useState(regionFromQuery);
   const [searchWord, setSearchWord] = useState('');
 
@@ -19,11 +21,12 @@ export const Search = () => {
       setSelectedRegion('');
     }
 
-    const searchWordFromQuery = queryParams.get('searchWord');
     if (searchWordFromQuery) {
       setSearchWord(searchWordFromQuery);
+    } else {
+      setSearchWord('');
     }
-  }, [location]);
+  }, [location, regionFromQuery, searchWordFromQuery]);
 
   return (
     <>