diff --git a/frontend/src/hooks/template/index.ts b/frontend/src/hooks/template/index.ts index 56cdbcf6e..d071d71ba 100644 --- a/frontend/src/hooks/template/index.ts +++ b/frontend/src/hooks/template/index.ts @@ -1,3 +1,2 @@ export { useSourceCode } from './useSourceCode'; export { useTag } from './useTag'; -export { useSearchKeyword } from './useSearchKeyword'; diff --git a/frontend/src/hooks/template/useSearchKeyword.ts b/frontend/src/hooks/template/useSearchKeyword.ts deleted file mode 100644 index ff82815d2..000000000 --- a/frontend/src/hooks/template/useSearchKeyword.ts +++ /dev/null @@ -1,8 +0,0 @@ -import { useInput, useDebounce } from '..'; - -export const useSearchKeyword = (initKeyword: string = '') => { - const [keyword, handleKeywordChange] = useInput(initKeyword); - const debouncedKeyword = useDebounce(keyword, 300); - - return { keyword, debouncedKeyword, handleKeywordChange }; -}; diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts index f55c62df4..e000b9d51 100644 --- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts +++ b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts @@ -21,6 +21,10 @@ export const MainContainer = styled.main` } `; +export const SearchKeywordPlaceholder = styled.div` + height: 1.5rem; +`; + export const SearchInput = styled(Input)` box-shadow: inset 1px 2px 8px #00000030; `; diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx index a6fe0ca70..143d87af9 100644 --- a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx +++ b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx @@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom'; import { SORTING_OPTIONS } from '@/api'; import { SearchIcon } from '@/assets/images'; -import { Flex, Input, PagingButtons, Dropdown } from '@/components'; +import { Flex, Input, PagingButtons, Dropdown, Heading } from '@/components'; import { useAuth } from '@/hooks/authentication'; import { useMemberNameQuery } from '@/queries/members'; import { useTrackPageViewed } from '@/service/amplitude'; @@ -42,7 +42,8 @@ const MyTemplatePage = () => { isTemplateListLoading, paginationSizes, dropdownProps, - keyword, + inputKeyword, + searchedKeyword, page, sortingOption, selectedTagIds, @@ -86,6 +87,10 @@ const MyTemplatePage = () => { /> )} + + {searchedKeyword ? `'${searchedKeyword}' 검색 결과` : ''} + + @@ -93,7 +98,7 @@ const MyTemplatePage = () => { @@ -119,7 +124,7 @@ const MyTemplatePage = () => { {!isTemplateListLoading && ( const selectedTagIds = queryParams.tags; const page = queryParams.page; const { currentValue: sortingOption, ...dropdownProps } = useDropdown(getSortingOptionByValue(queryParams.sort)); - const { keyword, debouncedKeyword, handleKeywordChange } = useSearchKeyword(queryParams.keyword); + const [inputKeyword, handleInputKeywordChange] = useInput(queryParams.keyword); const { memberInfo } = useAuth(); const memberId = passedMemberId ?? memberInfo.memberId; @@ -33,7 +32,7 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) => memberId, categoryId: selectedCategoryId, tagIds: selectedTagIds, - keyword: debouncedKeyword, + keyword: queryParams.keyword, sort: sortingOption.key, page, }); @@ -49,14 +48,6 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) => updateQueryParams({ sort: sortingOption.value, page: FIRST_PAGE }); }, [queryParams.sort, sortingOption, updateQueryParams]); - useEffect(() => { - if (queryParams.keyword === debouncedKeyword) { - return; - } - - updateQueryParams({ keyword: debouncedKeyword, page: FIRST_PAGE }); - }, [queryParams.keyword, debouncedKeyword, updateQueryParams]); - const handlePageChange = (page: number) => { scroll.top('smooth'); @@ -80,6 +71,8 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) => const handleSearchSubmit = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { updateQueryParams({ page: FIRST_PAGE }); + + updateQueryParams({ keyword: inputKeyword, page: FIRST_PAGE }); } }; @@ -89,11 +82,12 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) => isTemplateListLoading, paginationSizes, dropdownProps, - keyword, + inputKeyword, + searchedKeyword: queryParams.keyword, page, sortingOption, selectedTagIds, - handleKeywordChange, + handleKeywordChange: handleInputKeywordChange, handleCategoryMenuClick, handleTagMenuClick, handleSearchSubmit, diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts index 3dcea5371..1e9249340 100644 --- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts +++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts @@ -31,3 +31,7 @@ export const TemplateListSectionWrapper = styled.div` position: relative; width: 100%; `; + +export const SearchKeywordPlaceholder = styled.div` + height: 1.5rem; +`; diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx index 3399c02c4..941953799 100644 --- a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx +++ b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx @@ -15,7 +15,7 @@ import { TemporaryError, TemplateCard, } from '@/components'; -import { useDebounce, useDropdown, useInput, useQueryParams, useWindowWidth } from '@/hooks'; +import { useDropdown, useInput, useQueryParams, useWindowWidth } from '@/hooks'; import { useTemplateExploreQuery } from '@/queries/templates'; import { useTrackPageViewed } from '@/service/amplitude'; import { getSortingOptionByValue } from '@/service/getSortingOptionByValue'; @@ -46,9 +46,7 @@ const TemplateExplorePage = () => { updateQueryParams({ page }); }; - const [keyword, handleKeywordChange] = useInput(queryParams.keyword); - - const debouncedKeyword = useDebounce(keyword, 300); + const [inputKeyword, handleInputKeywordChange] = useInput(queryParams.keyword); const { currentValue: sortingOption, ...dropdownProps } = useDropdown(getSortingOptionByValue(queryParams.sort)); @@ -62,22 +60,15 @@ const TemplateExplorePage = () => { updateQueryParams({ sort: sortingOption.value, page: FIRST_PAGE }); }, [queryParams.sort, sortingOption, updateQueryParams]); - useEffect(() => { - if (queryParams.keyword === debouncedKeyword) { - return; - } - - updateQueryParams({ keyword: debouncedKeyword, page: FIRST_PAGE }); - }, [queryParams.keyword, debouncedKeyword, updateQueryParams]); - const handleSearchSubmit = (e: React.KeyboardEvent) => { if (e.key === 'Enter') { handlePage(FIRST_PAGE); + updateQueryParams({ keyword: inputKeyword, page: FIRST_PAGE }); } }; return ( - + {isMobile ? ( @@ -91,6 +82,10 @@ const TemplateExplorePage = () => { + + {queryParams.keyword ? `'${queryParams.keyword}' 검색 결과` : ''} + + @@ -98,8 +93,8 @@ const TemplateExplorePage = () => { @@ -115,13 +110,13 @@ const TemplateExplorePage = () => { } onReset={reset} - resetKeys={[keyword]} + resetKeys={[inputKeyword]} >