diff --git a/index.html b/index.html index a13e0b4f..1e52cca4 100644 --- a/index.html +++ b/index.html @@ -1,16 +1,16 @@ - - - - - - - 위플플 | 여정 공유 플랫폼 - - + + + + + + 위플플 | 여정 공유 서비스 +
+ - \ No newline at end of file diff --git a/src/components/search/RegionSelect.tsx b/src/components/search/RegionSelect.tsx index 2e269803..f0383b42 100644 --- 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 ( ); diff --git a/src/components/search/ResultCategory.tsx b/src/components/search/ResultCategory.tsx index d63bdf75..6707f6c0 100644 --- 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,6 +8,7 @@ interface ResultCategoryProps { category: string; fetchNextPage: (() => Promise>) | null; hasNextPage: boolean; + isFetchingNextPage: boolean; } export const ResultCategory = ({ @@ -16,6 +16,7 @@ export const ResultCategory = ({ category, fetchNextPage, hasNextPage, + isFetchingNextPage, }: ResultCategoryProps) => { // console.log('hasNextPage', hasNextPage); return ( @@ -24,14 +25,18 @@ export const ResultCategory = ({ {data.map((item) => ( ))} - {hasNextPage ? ( + {hasNextPage && !isFetchingNextPage ? ( fetchNextPage && fetchNextPage()}> 더보기 + ) : isFetchingNextPage ? ( + + Loading... + ) : ( -
검색 결과의 끝입니다.
+
)} ); diff --git a/src/components/search/SearchInput.tsx b/src/components/search/SearchInput.tsx index 1c52c466..dd7902b6 100644 --- 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 && (
- 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 ; @@ -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,7 +85,7 @@ export const SearchResult = ({ /> ))}
- {searchResults ? ( + {/* {searchResults ? ( ) : ( -
검색결과가 없습니다.
+
검색결과가 없습니다.
+ )} */} + {noResults ? ( +
검색결과가 없습니다.
+ ) : ( + )} ); diff --git a/src/pages/search/search.page.tsx b/src/pages/search/search.page.tsx index d947991f..100cea28 100644 --- 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 ( <>