[포트폴리오-1] 자유게시판 검색 기능 추가
- 검색하고 싶은 키워드를 입력하면 등록된 게시물들의 제목에서 키워드가 포함된 게시물을 찾아줍니다.
- 검색된 제목에 키워드가 강조되어 나타납니다.
키워드 검색 기능 추가를 위해 searchWord state와 isSearchWord state를 추가했습니다.
onChangeSearchWordInput 함수로 input 태그로 들어온 키워드를 searchWord state에 저장합니다.
onClickSearchButton을 클릭하면 키워드가 포함된 게시물들을 fetch합니다.
키워드 검색인 경우 isSearchWord state 값을 true로 변경합니다.
isSearchWord state가 true일 때만 키워드를 강조합니다.
검색 버튼을 누르기 전에 키워드가 강조되는 일이 없도록 했습니다.
- 기간을 입력하면 기간 내에 작성된 게시물들이 검색됩니다.
날짜 검색 기능을 구현하기 위해 searchDate state를 추가했습니다.
onChangeSearchDateInput 함수를 통해 input 태그에 입력된 날짜를 "YYYY-MM-DD" 형식으로 변경해줍니다.
"~"를 구분자로 해서 나눈 뒤 searchDate state에 저장합니다.
onClickSearchButton 함수가 실행되면 입력된 날짜들 사이에 등록된 게시물들을 fetch해옵니다.
(02/21 추가)
재사용성을 고려해서 검색창 컴포넌트를 분리했습니다.
이전 기능은 그대로 유지됩니다.
- 키워드 검색시 키워드가 제목에 포함된 게시물의 총 개수가 페이지네이션에 적용됩니다.
- 날짜 검색도 동일하게 동작합니다.
기존의 게시물 개수를 가져오는 쿼리에서 refetch를 사용합니다.
refetch는 props를 통해 검색창 컴포넌트로 전달됩니다.
검색창에서 검색 버튼을 클릭하면 refetch가 동작하여 게시물 개수가 변경됩니다.
'프로젝트 > 딸기마켓' 카테고리의 다른 글
| [딸기마켓] 이전 작업물 디자인 변경, 공지사항 페이지 추가 (0) | 2024.03.06 |
|---|---|
| [포트폴리오-1] 디자인 (0) | 2024.03.05 |
| [포트폴리오-1] 자유게시판 이미지 업로드 기능 추가 (0) | 2024.02.16 |
| [포트폴리오-1] 자기소개 게시판 (0) | 2024.02.14 |
| [포트폴리오-1] 랜덤고양이 페이지 추가 (0) | 2024.02.06 |
