🎯 주제
[Feature]: Better search idea · Issue #796 · react-icons/react-icons
Describe When you search for a new icon if you add any spaces it will not work because no icons have a space in its name, like when you want to search for a clip board icon you will need to type 'c...
github.com
이전 issue에서 사용자가 입력한 검색에 공백이 있을 경우 아이콘 검색이 안나오는 경우가 발생하는 오류가 있었다.
때문에 사용자의 입력을 처리하여 더 낫은 검색 방식을 제공하자는 issue가 나왔지만 아쉽게도 이미 merge가 되서 기여를 하지 못했었다.
하지만 preview가 astro 프레임워크로 변환되면서 해당 문제가 동일하게 발생한다는 것을 알게 되었다.
이를 기회로 해당 문제에 대해서 다시 issue를 등록하고 PR을 올리기로 하였다.
✍️ Issue 등록
[Feature]: Icons Search Issue with Spaces in Query · Issue #859 · react-icons/react-icons
Describe Searching for icons with spaces in the query does not yield results. This issue was raised once before, but it seems to persist. #796 Solution const [inputQuery, setInputQuery] = React.use...
github.com
🤔 해결 과정
🔍 query를 다루는 프로세스
사용자 검색에 해당하는 searchinput
컴포넌트를 살펴보게 되었다.
사용자의 입력값을 inputQuery
state로 관리한다는 것을 알게 되었다.
해당 inputQuery
state를 디바운싱하는 동시에 useSearch
custom hook을 통해 전역으로 state를 관리하도록 하는 것을 알 수 있었다.
이후 해당 query
를 가지고 검색 결과에 해당하는 index
컴포넌트에서 먼저 아이콘들을 순회하여 SearchIconSet
컴포넌트로 렌더링하고 와 일치하는 아이콘들을 반환하고 있는 것을 알 수 있었다.
🤩 문제 해결
프로세스를 알게된 이후 searchInput
컴포넌트 내부에서 디바운싱 하기전의 query
를 공백을 기준으로 배열을 분리하고 다시 합쳐 하나의 문자열 형태로 가공한 후 sanitizedQuery
라는 변수에 할당하였다. 이를 디바운싱하고 전역으로 관리하도록 수정하였다.
✈️ PR 날리기
Feat: Handle Queries with Spaces in SearchInput Component by llbllhllk · Pull Request #860 · react-icons/react-icons
Description The reported issue #859 highlighted a problem where searching for icons with spaces in the query did not yield results. Although the issue was raised previously, it still persisted. Ch...
github.com
✍️ 소감
내가 등록한 issue와 기존에 있었던 비슷한 issue를 close하고 직접 개선하신 것 같다.
긍정적으로 생각해보면 해당 issue와 관련해서 내가 PR을 날리지 않았다면 개선 조차 안되었을 것이다.
비록 머지 당하지는 않았지만, 또 하나의 문제를 개선했다는 점에서 만족하기로 하였다. 🤣
'🛠️ 오픈소스 기여' 카테고리의 다른 글
[react-icons] preview에서의 아이콘 import code 반응형 오류 해결하기 (0) | 2024.04.12 |
---|