Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 5 commits into from
Nov 15, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
395adc7
refactor(pages): 엔터를 눌러야 검색되도록 변경
Hain-tain Nov 14, 2024
9e63cf3
refactor(template): 사용하지 않는 useSearchKeyword 훅 삭제
Hain-tain Nov 14, 2024
1970b58
refactor(pages): layout shift 방지를 위해 SearchKeywordPlaceholder 설정 추가
Hain-tain Nov 15, 2024
6c85332
Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…
Hain-tain Nov 15, 2024
1df0ad8
refactor(pages): keyword=>inputKeyword, searchKeyword=>searchedKe…
Hain-tain Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion frontend/src/hooks/template/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,2 @@
export { useSourceCode } from './useSourceCode';
export { useTag } from './useTag';
export { useSearchKeyword } from './useSearchKeyword';
8 changes: 0 additions & 8 deletions frontend/src/hooks/template/useSearchKeyword.ts
View file
Open in desktop

This file was deleted.

4 changes: 4 additions & 0 deletions frontend/src/pages/MyTemplatesPage/MyTemplatePage.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
`;
Expand Down
13 changes: 9 additions & 4 deletions frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -42,7 +42,8 @@ const MyTemplatePage = () => {
isTemplateListLoading,
paginationSizes,
dropdownProps,
keyword,
inputKeyword,
searchedKeyword,
page,
sortingOption,
selectedTagIds,
Expand Down Expand Up @@ -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}
/>
Expand All @@ -119,7 +124,7 @@ const MyTemplatePage = () => {
{!isTemplateListLoading && (
<TemplateListSection
templateList={templateList}
isSearching={keyword !== ''}
isSearching={inputKeyword !== '' || inputKeyword !== searchedKeyword}
isEditMode={isEditMode}
selectedList={selectedList}
setSelectedList={setSelectedList}
Expand Down
22 changes: 8 additions & 14 deletions frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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;
Expand All @@ -33,7 +32,7 @@ export const useFilteredTemplateList = ({ memberId: passedMemberId }: Props) =>
memberId,
categoryId: selectedCategoryId,
tagIds: selectedTagIds,
keyword: debouncedKeyword,
keyword: queryParams.keyword,
sort: sortingOption.key,
page,
});
Expand All @@ -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');

Expand All @@ -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 });
}
};

Expand All @@ -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,
Expand Down
4 changes: 4 additions & 0 deletions frontend/src/pages/TemplateExplorePage/TemplateExplorePage.style.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,7 @@ export const TemplateListSectionWrapper = styled.div`
position: relative;
width: 100%;
`;

export const SearchKeywordPlaceholder = styled.div`
height: 1.5rem;
`;
29 changes: 12 additions & 17 deletions frontend/src/pages/TemplateExplorePage/TemplateExplorePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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));

Expand All @@ -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'>
Expand All @@ -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>
Expand All @@ -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>
Expand Down