From 5f9d76f5c0fc9cd48322306633e6ec9ed99fd1b4 Mon Sep 17 00:00:00 2001 From: Taeeun Kim Date: Thu, 6 Jun 2024 08:45:55 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20=ED=83=9C=EA=B7=B8=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=EC=9D=98=20endpoint=EB=A5=BC=20tagId=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=20(#137)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 태그 id 변경 * fix: 태그 검색의 endpoint를 tagId로 변경 --- .../TagSearchResultList/TagSearchResultList.tsx | 10 +++------- src/constants/index.ts | 6 +++--- .../search/useInfiniteProductSearchResultsQuery.ts | 2 +- src/hooks/search/useSearch.ts | 7 +++---- src/mocks/handlers/searchHandlers.ts | 12 ++++++++++-- src/pages/SearchPage/SearchPage.tsx | 2 +- src/pages/SearchPage/TagSearchResultPage.tsx | 6 +++++- 7 files changed, 26 insertions(+), 19 deletions(-) diff --git a/src/components/Search/TagSearchResultList/TagSearchResultList.tsx b/src/components/Search/TagSearchResultList/TagSearchResultList.tsx index 37321011..d8ec6353 100644 --- 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(null); useIntersectionObserver(fetchNextPage, scrollRef, hasNextPage); diff --git a/src/constants/index.ts b/src/constants/index.ts index 56c1505a..b973e222 100644 --- a/src/constants/index.ts +++ b/src/constants/index.ts @@ -81,7 +81,7 @@ export const PAGE_TITLE = { export const RECOMMENDED_TAGS = [ { id: 1, name: '맛있어요', tagType: 'TASTE' }, - { id: 2, name: '간식', tagType: 'ETC' }, - { id: 3, name: '갓성비', tagType: 'QUANTITY' }, - { id: 4, name: '달달해요', tagType: 'TASTE' }, + { id: 15, name: '간식', tagType: 'ETC' }, + { id: 11, name: '갓성비', tagType: 'QUANTITY' }, + { id: 5, name: '달달해요', tagType: 'TASTE' }, ]; diff --git a/src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts b/src/hooks/queries/search/useInfiniteProductSearchResultsQuery.ts index c7ae78f6..5a16e75c 100644 --- 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 index c6ddef11..5b062295 100644 --- a/src/hooks/search/useSearch.ts +++ b/src/hooks/search/useSearch.ts @@ -79,12 +79,11 @@ const useSearch = () => { setIsAutocompleteOpen(false); }; - const handleTagSearch: MouseEventHandler = (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 index b1591ef5..250a2805 100644 --- 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 index 64968711..a99059cc 100644 --- a/src/pages/SearchPage/SearchPage.tsx +++ b/src/pages/SearchPage/SearchPage.tsx @@ -121,7 +121,7 @@ export const SearchPage = () => {
{RECOMMENDED_TAGS.map(({ id, name }) => ( -