feat: 태그 검색 기능 구현

src/components/Search/ProductSearchResultList/ProductSearchResultList.tsx

@@ -10,10 +10,15 @@ import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
 
 interface ProductSearchResultListProps {
   searchQuery: string;
+  isTagSearch: boolean;
 }
 
-const ProductSearchResultList = ({ searchQuery }: ProductSearchResultListProps) => {
-  const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteProductSearchResultsQuery(searchQuery);
+const ProductSearchResultList = ({ searchQuery, isTagSearch }: ProductSearchResultListProps) => {
+  const {
+    data: searchResponse,
+    fetchNextPage,
+    hasNextPage,
+  } = useInfiniteProductSearchResultsQuery(searchQuery, isTagSearch);
   const scrollRef = useRef<HTMLDivElement>(null);
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);
 

src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts

@@ -3,20 +3,22 @@ import { useSuspendedInfiniteQuery } from '..';
 import { searchApi } from '@/apis';
 import type { ProductSearchResultResponse } from '@/types/response';
 
-const fetchProductSearchResults = async (query: string, pageParam: number) => {
+const fetchProductSearchResults = async (query: string, endpoint: 'tags' | 'products', pageParam: number) => {
   const response = await searchApi.get({
-    params: '/products/results',
+    params: `/${endpoint}/results`,
     queries: `?query=${query}&lastProductId=${pageParam}`,
   });
   const data: ProductSearchResultResponse = await response.json();
 
   return data;
 };
 
-const useInfiniteProductSearchResultsQuery = (query: string) => {
+const useInfiniteProductSearchResultsQuery = (query: string, isTagSearch: boolean) => {
+  const endpoint = isTagSearch ? 'tags' : 'products';
+
   return useSuspendedInfiniteQuery(
-    ['search', 'products', 'results', query],
-    ({ pageParam = 0 }) => fetchProductSearchResults(query, pageParam),
+    ['search', endpoint, 'results', query],
+    ({ pageParam = 0 }) => fetchProductSearchResults(query, endpoint, pageParam),
     {
       getNextPageParam: (prevResponse: ProductSearchResultResponse) => {
         const lastCursor = prevResponse.products.length

src/hooks/search/useSearch.ts

@@ -16,6 +16,7 @@ const useSearch = () => {
   const [searchQuery, setSearchQuery] = useState(currentSearchQuery || '');
   const [isSubmitted, setIsSubmitted] = useState(!!currentSearchQuery);
   const [isAutocompleteOpen, setIsAutocompleteOpen] = useState(searchQuery.length > 0);
+  const [isTagSearch, setIsTagSearch] = useState(false);
 
   const { toast } = useToastActionContext();
 
@@ -41,7 +42,7 @@ const useSearch = () => {
     setSearchParams({ query: value });
   };
 
-  const handleSearch: FormEventHandler<HTMLFormElement> = (event) => {
+  const handleSearchForm: FormEventHandler<HTMLFormElement> = (event) => {
     event.preventDefault();
     gaEvent({ category: 'submit', action: '검색 페이지에서 검색', label: '검색' });
 
@@ -62,7 +63,7 @@ const useSearch = () => {
     setLocalStorage('recentSearchedKeywords', [trimmedSearchQuery, ...recentSearchedKeywords.slice(0, 7)]);
   };
 
-  const handleSearchClick: MouseEventHandler<HTMLButtonElement> = (event) => {
+  const handleSearchByClick: MouseEventHandler<HTMLButtonElement> = (event) => {
     const { value } = event.currentTarget;
     searchKeyword(value);
   };
@@ -71,6 +72,12 @@ const useSearch = () => {
     setIsAutocompleteOpen(false);
   };
 
+  const handleTagSearch: MouseEventHandler<HTMLButtonElement> = (event) => {
+    const { value } = event.currentTarget;
+    searchKeyword(value);
+    setIsTagSearch(true);
+  };
+
   const resetSearchQuery = () => {
     setSearchQuery('');
     setIsSubmitted(false);
@@ -84,10 +91,11 @@ const useSearch = () => {
     isSubmitted,
     isAutocompleteOpen,
     handleSearchQuery,
-    handleSearch,
-    handleSearchClick,
+    handleSearchForm,
+    handleSearchByClick,
     handleAutocompleteClose,
-    searchKeyword,
+    isTagSearch,
+    handleTagSearch,
     resetSearchQuery,
   };
 };

src/mocks/handlers/searchHandlers.ts

@@ -14,7 +14,7 @@ export const searchHandlers = [
       return res(ctx.status(400));
     }
 
-    if (searchId === 'products') {
+    if (searchId === 'products' || searchId === 'tags') {
       const filteredProducts = {
         page: { ...productSearchResults.page },
         products: productSearchResults.products

src/pages/SearchPage/SearchPage.tsx

@@ -17,10 +17,11 @@ export const SearchPage = () => {
     isSubmitted,
     isAutocompleteOpen,
     handleSearchQuery,
-    handleSearch,
-    handleSearchClick,
+    handleSearchForm,
+    handleSearchByClick,
     handleAutocompleteClose,
-    searchKeyword,
+    isTagSearch,
+    handleTagSearch,
     resetSearchQuery,
   } = useSearch();
   const [debouncedSearchQuery, setDebouncedSearchQuery] = useState(searchQuery || '');
@@ -47,15 +48,15 @@ export const SearchPage = () => {
       <section className={searchSection}>
         <PageHeader title="검색" hasBackLink />
         <div style={{ height: '16px' }} />
-        <form onSubmit={isSubmitted ? resetSearchQuery : handleSearch}>
+        <form onSubmit={isSubmitted ? resetSearchQuery : handleSearchForm}>
           <SearchInput value={searchQuery} onChange={handleSearchQuery} isInputSubmitted={isSubmitted} ref={inputRef} />
         </form>
         {!isSubmitted && debouncedSearchQuery && isAutocompleteOpen && (
           <ErrorBoundary fallback={ErrorComponent} handleReset={reset}>
             <Suspense fallback={<Loading />}>
               <RecommendList
                 searchQuery={debouncedSearchQuery}
-                handleSearchClick={handleSearchClick}
+                handleSearchClick={handleSearchByClick}
                 handleAutocompleteClose={handleAutocompleteClose}
               />
             </Suspense>
@@ -64,30 +65,34 @@ export const SearchPage = () => {
       </section>
       <section className={searchSection}>
         {isSubmitted && searchQuery ? (
-          <div>
+          <>
             <p className={searchResultTitle}>상품 바로가기</p>
             <ErrorBoundary fallback={ErrorComponent}>
               <Suspense fallback={<Loading />}>
-                <ProductSearchResultList searchQuery={searchQuery} />
+                <ProductSearchResultList searchQuery={searchQuery} isTagSearch={isTagSearch} />
               </Suspense>
             </ErrorBoundary>
             <button className={showMoreButton}>더보기</button>
             {/* divider 컴포넌트 */}
             <hr style={{ border: '1px solid #e6e6e6' }} />
             <div style={{ height: '12px' }} />
-            <p className={searchResultTitle}>꿀!조합 바로가기</p>
-            <ErrorBoundary fallback={ErrorComponent}>
-              <Suspense fallback={<Loading />}>
-                <RecipeSearchResultList searchQuery={searchQuery} />
-              </Suspense>
-            </ErrorBoundary>
-          </div>
+            {!isTagSearch && (
+              <>
+                <p className={searchResultTitle}>꿀!조합 바로가기</p>
+                <ErrorBoundary fallback={ErrorComponent}>
+                  <Suspense fallback={<Loading />}>
+                    <RecipeSearchResultList searchQuery={searchQuery} />
+                  </Suspense>
+                </ErrorBoundary>
+              </>
+            )}
+          </>
         ) : (
-          <div>
+          <>
             <p className={subTitle}>최근 검색어</p>
             <div className={badgeContainer}>
               {recentSearchedKeywords?.map((keyword, index) => (
-                <button key={index} onClick={() => searchKeyword(keyword)}>
+                <button type="button" key={index} value={keyword} onClick={handleSearchByClick}>
                   <Badge color="#e6e6e6" textColor="#808080" outlined>
                     {keyword}
                   </Badge>
@@ -97,14 +102,14 @@ export const SearchPage = () => {
             <p className={subTitle}>추천 태그</p>
             <div className={badgeContainer}>
               {RECOMMENDED_TAGS.map(({ id, name }) => (
-                <button key={id}>
+                <button type="button" key={id} value={name} onClick={handleTagSearch}>
                   <Badge color="#e6e6e6" textColor="#808080">
                     {name}
                   </Badge>
                 </button>
               ))}
             </div>
-          </div>
+          </>
         )}
       </section>
     </>