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]}
>