fix: 태그 검색의 endpoint를 tagId로 변경

fun-eat · Jun 3, 2024 · 4820834 · 4820834
1 parent fc8190a
commit 4820834
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 16 deletions.
diff --git a/src/components/Search/TagSearchResultList/TagSearchResultList.tsx b/src/components/Search/TagSearchResultList/TagSearchResultList.tsx
@@ -10,15 +10,11 @@ import { useIntersectionObserver } from '@/hooks/common';
 import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search';
 
 interface TagSearchResultListProps {
-  searchQuery: string;
+  tagId: string;
 }
 
-const TagSearchResultList = ({ searchQuery }: TagSearchResultListProps) => {
-  const {
-    data: searchResponse,
-    fetchNextPage,
-    hasNextPage,
-  } = useInfiniteProductSearchResultsQuery(searchQuery, 'tags');
+const TagSearchResultList = ({ tagId }: TagSearchResultListProps) => {
+  const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteProductSearchResultsQuery(tagId, 'tags');
 
   const scrollRef = useRef<HTMLDivElement>(null);
   useIntersectionObserver<HTMLDivElement>(fetchNextPage, scrollRef, hasNextPage);

diff --git a/src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts b/src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts
@@ -8,7 +8,7 @@ type SearchResultEndPoint = 'tags' | 'products';
 const fetchProductSearchResults = async (query: string, endpoint: SearchResultEndPoint, pageParam: number) => {
   const response = await searchApi.get({
     params: `/${endpoint}/results`,
-    queries: `?query=${query}&lastProductId=${pageParam}`,
+    queries: `?${endpoint === 'tags' ? 'tagId' : 'query'}=${query}&lastProductId=${pageParam}`,
   });
   const data: ProductSearchResultResponse = await response.json();
 

diff --git a/src/hooks/search/useSearch.ts b/src/hooks/search/useSearch.ts
@@ -79,12 +79,11 @@ const useSearch = () => {
     setIsAutocompleteOpen(false);
   };
 
-  const handleTagSearch: MouseEventHandler<HTMLButtonElement> = (event) => {
-    const { value } = event.currentTarget;
-    setSearchQuery(value);
+  const handleTagSearch = (id: number, name: string) => {
+    setSearchQuery(name);
     setIsSubmitted(true);
 
-    navigate(`${PATH.SEARCH}/tags?query=${value}`);
+    navigate(`${PATH.SEARCH}/tags?query=${name}&id=${id}`);
   };
 
   const resetSearchQuery = () => {

diff --git a/src/mocks/handlers/searchHandlers.ts b/src/mocks/handlers/searchHandlers.ts
@@ -7,14 +7,14 @@ import searchingProducts from '../data/searchingProducts.json';
 export const searchHandlers = [
   rest.get('/api/search/:searchId/results', (req, res, ctx) => {
     const { searchId } = req.params;
-    const query = req.url.searchParams.get('query');
+    const query = req.url.searchParams.get('query') || req.url.searchParams.get('tagId');
     const page = Number(req.url.searchParams.get('page'));
 
     if (query === null) {
       return res(ctx.status(400));
     }
 
-    if (searchId === 'products' || searchId === 'tags') {
+    if (searchId === 'products') {
       const filteredProducts = {
         page: { ...productSearchResults.page },
         products: productSearchResults.products
@@ -24,6 +24,14 @@ export const searchHandlers = [
       return res(ctx.status(200), ctx.json(filteredProducts), ctx.delay(1000));
     }
 
+    if (searchId === 'tags') {
+      const filteredProducts = {
+        page: { ...productSearchResults.page },
+        products: productSearchResults.products.slice(page * 5, (page + 1) * 5),
+      };
+      return res(ctx.status(200), ctx.json(filteredProducts), ctx.delay(1000));
+    }
+
     if (searchId === 'recipes') {
       const filteredRecipes = {
         page: { ...recipeResponse.page },

diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx
@@ -121,7 +121,7 @@ export const SearchPage = () => {
               </Text>
               <div className={badgeContainer}>
                 {RECOMMENDED_TAGS.map(({ id, name }) => (
-                  <button type="button" key={id} value={name} onClick={handleTagSearch}>
+                  <button type="button" key={id} value={name} onClick={() => handleTagSearch(id, name)}>
                     <Badge color="#e6e6e6" textColor="#808080">
                       {name}
                     </Badge>

diff --git a/src/pages/SearchPage/TagSearchResultPage.tsx b/src/pages/SearchPage/TagSearchResultPage.tsx
@@ -1,4 +1,5 @@
 import { Suspense } from 'react';
+import { useSearchParams } from 'react-router-dom';
 
 import { form, formWrapper, searchResultTitle, searchSection } from './searchPage.css';
 
@@ -9,6 +10,9 @@ import { useSearch } from '@/hooks/search';
 export const TagSearchResultPage = () => {
   const { inputRef, searchQuery, isSubmitted, handleSearchQuery, handleSearchForm } = useSearch();
 
+  const [searchParams, _setSearchParams] = useSearchParams();
+  const tagId = searchParams.get('id') || '';
+
   return (
     <>
       <div className={formWrapper}>
@@ -28,7 +32,7 @@ export const TagSearchResultPage = () => {
         </Text>
         <ErrorBoundary fallback={ErrorComponent}>
           <Suspense fallback={<Loading />}>
-            <TagSearchResultList searchQuery={searchQuery} />
+            <TagSearchResultList tagId={tagId} />
           </Suspense>
         </ErrorBoundary>
       </section>