refactor(pages): keyword=>inputKeyword, searchKeyword=>searchedKeywor…

…d, 으로 변경
woowacourse-teams · Nov 15, 2024 · 1df0ad8 · 1df0ad8
1 parent 6c85332
commit 1df0ad8
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 15 deletions.
diff --git a/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx b/frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
@@ -42,8 +42,8 @@ const MyTemplatePage = () => {
     isTemplateListLoading,
     paginationSizes,
     dropdownProps,
-    keyword,
-    searchKeyword,
+    inputKeyword,
+    searchedKeyword,
     page,
     sortingOption,
     selectedTagIds,
@@ -88,7 +88,7 @@ const MyTemplatePage = () => {
           )}
 
           <S.SearchKeywordPlaceholder>
-            <Heading.XSmall color='black'>{searchKeyword ? `'${searchKeyword}' 검색 결과` : ''}</Heading.XSmall>
+            <Heading.XSmall color='black'>{searchedKeyword ? `'${searchedKeyword}' 검색 결과` : ''}</Heading.XSmall>
           </S.SearchKeywordPlaceholder>
 
           <Flex width='100%' gap='1rem'>
@@ -98,7 +98,7 @@ const MyTemplatePage = () => {
               </Input.Adornment>
               <Input.TextField
                 placeholder='검색'
-                value={keyword}
+                value={inputKeyword}
                 onChange={handleKeywordChange}
                 onKeyDown={handleSearchSubmit}
               />
@@ -124,7 +124,7 @@ const MyTemplatePage = () => {
             {!isTemplateListLoading && (
               <TemplateListSection
                 templateList={templateList}
-                isSearching={keyword !== '' || keyword !== searchKeyword}
+                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
@@ -19,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, handleKeywordChange] = useInput(queryParams.keyword);
+  const [inputKeyword, handleInputKeywordChange] = useInput(queryParams.keyword);
 
   const { memberInfo } = useAuth();
   const memberId = passedMemberId ?? memberInfo.memberId;
@@ -72,7 +72,7 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) =>
     if (e.key === 'Enter') {
       updateQueryParams({ page: FIRST_PAGE });
 
-      updateQueryParams({ keyword, page: FIRST_PAGE });
+      updateQueryParams({ keyword: inputKeyword, page: FIRST_PAGE });
     }
   };
 
@@ -82,12 +82,12 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) =>
     isTemplateListLoading,
     paginationSizes,
     dropdownProps,
-    keyword,
-    searchKeyword: queryParams.keyword,
+    inputKeyword,
+    searchedKeyword: queryParams.keyword,
     page,
     sortingOption,
     selectedTagIds,
-    handleKeywordChange,
+    handleKeywordChange: handleInputKeywordChange,
     handleCategoryMenuClick,
     handleTagMenuClick,
     handleSearchSubmit,

diff --git a/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx b/frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
@@ -46,7 +46,7 @@ const TemplateExplorePage = () => {
     updateQueryParams({ page });
   };
 
-  const [keyword, handleKeywordChange] = useInput(queryParams.keyword);
+  const [inputKeyword, handleInputKeywordChange] = useInput(queryParams.keyword);
 
   const { currentValue: sortingOption, ...dropdownProps } = useDropdown(getSortingOptionByValue(queryParams.sort));
 
@@ -63,7 +63,7 @@ const TemplateExplorePage = () => {
   const handleSearchSubmit = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === 'Enter') {
       handlePage(FIRST_PAGE);
-      updateQueryParams({ keyword, page: FIRST_PAGE });
+      updateQueryParams({ keyword: inputKeyword, page: FIRST_PAGE });
     }
   };
 
@@ -93,8 +93,8 @@ const TemplateExplorePage = () => {
           </Input.Adornment>
           <Input.TextField
             placeholder='검색'
-            value={keyword}
-            onChange={handleKeywordChange}
+            value={inputKeyword}
+            onChange={handleInputKeywordChange}
             onKeyDown={handleSearchSubmit}
           />
         </S.SearchInput>
@@ -110,7 +110,7 @@ const TemplateExplorePage = () => {
           <ErrorBoundary
             FallbackComponent={(fallbackProps) => <TemporaryError {...fallbackProps} />}
             onReset={reset}
-            resetKeys={[keyword]}
+            resetKeys={[inputKeyword]}
           >
             <TemplateList
               page={page}