Feature: 검색 기능을 구현한다 - Githubissues

Kim-DaHam / Portfolly

Portfolly 프로젝트 리팩토링

1 stars 0 forks source link

Feature: 검색 기능을 구현한다 #100

Closed Kim-DaHam closed 7 months ago

Kim-DaHam commented 7 months ago

개요

Header.tsx 컴포넌트의 검색 기능을 구현합니다.

작업사항

SearchItem.tsx를 생성한다.
- 검색어를 입력했을 때 나타나는 검색 결과 아이템.
SearchItemList.tsx를 생성한다.
SearchSlice.ts를 생성한다.
- SearchBar.tsx에 입력하는 키워드를 전역상태 searchKeyword로 관리한다.(props drilling 때문)
SearchPage.tsx를 생성한다.
- 검색 결과를 보여주는 페이지.
SearchFilterBar.ts를 생성한다.
- /search 페이지의 중복 검색 바.
MSW 포트폴리오 목록을 가져오는 /portfolios GET api핸들러를 필터 검색이 가능하게 수정한다.

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/d54d5620-9fb8-4c12-a5be-b95e141f61d7

사용 방법

키워드 검색은 제목 검색만 가능합니다.
키워드 검색 시, SearchModal의 SearchItemList에서는 첫 페이지 목록 100개 중 키워드를 포함하는 아이템을 보여줍니다.
- 맨 하단에 '"검색어"를 포함한 결과 더보기'를 클릭하면 더 많은 검색 결과를 확인할 수 있습니다.