-
Notifications
You must be signed in to change notification settings - Fork 4
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.
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
검색에 관한 설정과 전체 게시글 초기 설정 변경 #547
Merged
Merged
Changes from all commits
Commits
Show all changes
10 commits
Select commit
Hold shift + click to select a range
6edaafc
feat: (#530) 페이지 진입 시 전체, 최신순으로 정렬 옵션이 설정되도록 수정
Gilpop8663 6d8bc37
feat: (#534) 아무런 값이 없으면 검색이 되지 않도록 구현
Gilpop8663 12bedcd
fix: (#530) 왼쪽 카테고리 탭에서 검색어를 보여주던 기능 삭제
Gilpop8663 b5fc22b
feat: (#530) 검색어와 공백을 제거한 검색어가 다를 때 공백을 제거한 검색어로 state값 변경
Gilpop8663 e098e43
feat: (#530) 검색어 자동완성 기능 해제
Gilpop8663 696b507
fix: (#530) onKeywordChange에서 handleKeywordChange로 이름 변경
Gilpop8663 be04d6b
fix: (#530) onSearchSubmit에서 handleSearchSubmit로 이름 변경
Gilpop8663 9e57d99
refactor: (#530) 검색어에서 중간의 공백이 많은 경우도 고려하여 중간 공백 제거 기능 구현
Gilpop8663 106857e
feat: (#530) 검색어 100글자까지 입력 가능하도록 설정
Gilpop8663 faed463
refactor: (#530) 기존 hook을 이용하여 기능이 동작하도록 코드 변경
Gilpop8663 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { getTrimmedWord } from '@utils/getTrimmedWord'; | ||
|
||
test.each([ | ||
['검색어 입니다', '검색어 입니다'], | ||
[' 완전히 갤럭시 임 ', '완전히 갤럭시 임'], | ||
[' ', ''], | ||
['', ''], | ||
])( | ||
'getTrimmedWord 함수에서 단어를 입력했을 때 중복된 공백을 제거한 단어를 반환한다.', | ||
(word, expectedWord) => { | ||
const result = getTrimmedWord(word); | ||
|
||
expect(result).toBe(expectedWord); | ||
} | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import React from 'react'; | ||
import { MemoryRouter } from 'react-router-dom'; | ||
|
||
import { fireEvent, render, renderHook, screen } from '@testing-library/react'; | ||
|
||
import { useSearch } from '@hooks/useSearch'; | ||
|
||
describe('useSearch 훅이 검색을 하는지 확인한다.', () => { | ||
test('초기 값이 없다면 keyword는 빈 문자열이다.', () => { | ||
const { result } = renderHook(() => useSearch(), { wrapper: MemoryRouter }); | ||
|
||
const { keyword } = result.current; | ||
|
||
expect(keyword).toBe(''); | ||
}); | ||
|
||
test('초기 값이 있다면 keyword 값에 설정된다.', () => { | ||
const KEYWORD = '갤럭시'; | ||
|
||
const { result } = renderHook(() => useSearch(KEYWORD), { wrapper: MemoryRouter }); | ||
|
||
const { keyword } = result.current; | ||
|
||
expect(keyword).toBe(KEYWORD); | ||
}); | ||
|
||
test('onChange 이벤트를 한다면 keyword 값에 설정된다.', () => { | ||
const KEYWORD = '갤럭시'; | ||
|
||
const { result } = renderHook(() => useSearch(KEYWORD), { wrapper: MemoryRouter }); | ||
const { keyword, handleKeywordChange } = result.current; | ||
|
||
render(<input value={keyword} aria-label="search-input" onChange={handleKeywordChange} />); | ||
|
||
const input = screen.getByLabelText('search-input'); | ||
|
||
fireEvent.change(input, { target: { value: KEYWORD } }); | ||
|
||
expect(result.current.keyword).toBe(KEYWORD); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -21,7 +21,7 @@ interface PostOptionContextProps { | |
export default function PostOptionProvider({ children }: PropsWithChildren) { | ||
const [postOption, setPostOption] = useState<PostOption>({ | ||
sorting: SORTING.LATEST, | ||
status: STATUS.PROGRESS, | ||
status: STATUS.ALL, | ||
}); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍👍 |
||
|
||
return ( | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { useSearchParams } from 'react-router-dom'; | ||
|
||
import { DEFAULT_KEYWORD, SEARCH_KEYWORD, SEARCH_KEYWORD_MAX_LENGTH } from '@constants/post'; | ||
|
||
import { getTrimmedWord } from '@utils/getTrimmedWord'; | ||
|
||
export const useCurrentKeyword = () => { | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 오 컴포넌트 뿐만 아니라 다른 hook에서도 쓰이는 hook이군요! 재사용성 굳입니다👍👍 |
||
const [searchParams] = useSearchParams(); | ||
const currentKeyword = | ||
searchParams.get(SEARCH_KEYWORD)?.toString().slice(0, SEARCH_KEYWORD_MAX_LENGTH) ?? | ||
DEFAULT_KEYWORD; | ||
|
||
return { | ||
currentKeyword: | ||
currentKeyword !== DEFAULT_KEYWORD ? getTrimmedWord(currentKeyword) : currentKeyword, | ||
}; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { ChangeEvent, FormEvent, useRef } from 'react'; | ||
import { useNavigate } from 'react-router-dom'; | ||
|
||
import { SEARCH_KEYWORD_MAX_LENGTH } from '@constants/post'; | ||
|
||
import { getTrimmedWord } from '@utils/getTrimmedWord'; | ||
|
||
import { useText } from './useText'; | ||
|
||
export const useSearch = (initialKeyword = '') => { | ||
const navigate = useNavigate(); | ||
const searchInputRef = useRef<HTMLInputElement>(null); | ||
const { text: keyword, setText: setKeyword, handleTextChange } = useText(initialKeyword); | ||
|
||
const handleKeywordChange = (event: ChangeEvent<HTMLInputElement>) => { | ||
if (!searchInputRef.current) return; | ||
|
||
handleTextChange(event, { MAX_LENGTH: SEARCH_KEYWORD_MAX_LENGTH, MIN_LENGTH: 0 }); | ||
}; | ||
|
||
const handleSearchSubmit = (event: FormEvent<HTMLFormElement>) => { | ||
event.preventDefault(); | ||
|
||
if (!searchInputRef.current) return; | ||
|
||
const trimmedKeyword = getTrimmedWord(keyword); | ||
|
||
if (keyword !== trimmedKeyword) { | ||
setKeyword(trimmedKeyword); | ||
} | ||
|
||
if (trimmedKeyword === '') { | ||
searchInputRef.current.setCustomValidity('검색어를 입력해주세요'); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. 👍👍👍 |
||
searchInputRef.current.reportValidity(); | ||
return; | ||
} | ||
|
||
navigate(`/search?keyword=${trimmedKeyword}`); | ||
}; | ||
|
||
return { keyword, handleKeywordChange, handleSearchSubmit, searchInputRef }; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
export const getTrimmedWord = (word: string) => { | ||
return word | ||
.split(' ') | ||
.map(word => word.trim()) | ||
.filter(word => word !== '') | ||
.join(' '); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오오 새로운 속성이네요