템플릿 검색시 엔터를 눌러야 검색되도록 변경 (#915)

woowacourse-teams · Nov 15, 2024 · 1c8b12a · 1c8b12a
1 parent 459ad89
commit 1c8b12a
Show file tree

Hide file tree

Showing 7 changed files with 37 additions and 44 deletions.
diff --git 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
diff --git 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
@@ -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,14 +87,18 @@ const MyTemplatePage = () => {
             />
           )}
 
+          <S.SearchKeywordPlaceholder>
+            <Heading.XSmall color='black'>{searchedKeyword ? `'${searchedKeyword}' 검색 결과` : ''}</Heading.XSmall>
+          </S.SearchKeywordPlaceholder>
+
           <Flex width='100%' gap='1rem'>
             <S.SearchInput size='medium' variant='text'>
               <Input.Adornment>
                 <SearchIcon aria-label='' />
               </Input.Adornment>
               <Input.TextField
                 placeholder='검색'
-                value={keyword}
+                value={inputKeyword}
                 onChange={handleKeywordChange}
                 onKeyDown={handleSearchSubmit}
               />
@@ -119,7 +124,7 @@ const MyTemplatePage = () => {
             {!isTemplateListLoading && (
               <TemplateListSection
                 templateList={templateList}
-                isSearching={keyword !== ''}
+                isSearching={inputKeyword !== '' || inputKeyword !== searchedKeyword}
                 isEditMode={isEditMode}
                 selectedList={selectedList}
                 setSelectedList={setSelectedList}

diff --git a/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts b/frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
@@ -1,8 +1,7 @@
 import { useCallback, useEffect } from 'react';
 
-import { useDropdown, useQueryParams } from '@/hooks';
+import { useDropdown, useInput, useQueryParams } from '@/hooks';
 import { useAuth } from '@/hooks/authentication';
-import { useSearchKeyword } from '@/hooks/template';
 import { useTemplateListQuery } from '@/queries/templates';
 import { getSortingOptionByValue } from '@/service/getSortingOptionByValue';
 import { scroll } from '@/utils';
@@ -20,7 +19,7 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) =>
   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<HTMLInputElement>) => {
     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
@@ -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
@@ -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<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       handlePage(FIRST_PAGE);
+      updateQueryParams({ keyword: inputKeyword, page: FIRST_PAGE });
     }
   };
 
   return (
-    <Flex direction='column' gap='4rem' align='flex-start' css={{ paddingTop: '5rem' }}>
+    <Flex direction='column' gap='1.5rem' align='flex-start' css={{ paddingTop: '5rem' }}>
       <Flex direction='column' justify='flex-start' gap='1rem' width='100%'>
         {isMobile ? (
           <Heading.XSmall color='black'>
@@ -91,15 +82,19 @@ const TemplateExplorePage = () => {
         <HotTopicCarousel selectTopic={selectTopic} selectedHotTopic={selectedHotTopic} />
       </Flex>
 
+      <S.SearchKeywordPlaceholder>
+        <Heading.XSmall color='black'>{queryParams.keyword ? `'${queryParams.keyword}' 검색 결과` : ''}</Heading.XSmall>
+      </S.SearchKeywordPlaceholder>
+
       <Flex width='100%' gap='1rem'>
         <S.SearchInput size='medium' variant='text'>
           <Input.Adornment>
             <SearchIcon aria-label='' />
           </Input.Adornment>
           <Input.TextField
             placeholder='검색'
-            value={keyword}
-            onChange={handleKeywordChange}
+            value={inputKeyword}
+            onChange={handleInputKeywordChange}
             onKeyDown={handleSearchSubmit}
           />
         </S.SearchInput>
@@ -115,13 +110,13 @@ const TemplateExplorePage = () => {
           <ErrorBoundary
             FallbackComponent={(fallbackProps) => <TemporaryError {...fallbackProps} />}
             onReset={reset}
-            resetKeys={[keyword]}
+            resetKeys={[inputKeyword]}
           >
             <TemplateList
               page={page}
               handlePage={handlePage}
               sortingOption={sortingOption}
-              keyword={debouncedKeyword}
+              keyword={queryParams.keyword}
               tagIds={selectedTagIds}
             />
           </ErrorBoundary>