검색 기능 구현

[codeisneverodd]

개요

input에 텍스트를 입력하면 검색 기능을 통해 아래에 선택가능한 문제 항목이 출력됩니다!

주요 구현 사항

1. 해설 목록 관리를 위한 solutionListState 전역상태 추가

해당 전역 상태는 로컬스토리지에 관리됩니다.

2. useFetchsolutionList 훅 로직

해당 훅은 src/hooks/solutionList 에 있으며 로직은

1. 레벨 별로 api 호출을 한다.
2. 호출된 값에서 00-해답-예시.js 를 제외한 해설들에서 name, level 만 빼내어 solutionList에 저장한다. (더 많은 데이터가 필요해지면 이곳에서 값을 추가하면 될 것 입니다.)
3. solutionList를 level 순으로 정렬한다
   입니다.

3. QuestionInputAndList 컴포넌트 화

@chaerin-dev 이 부분 중점적으로 봐주세요! 우선 로직은

1. input 의 값이 변하며handleQuestionNameInput 가 실행되고, solutionList 를 정규표현식(한글검색)을 통해 filtering 한 questionList를 수정한다.
2. 각 QuestionBtn 들은 data-value로 name 을 가지며, 클릭 시 questionName 상태를 해당 name 으로 변화시킨다.
   입니다.

해당 컴포넌트에는 onQuestionNameChange 라는 props 가 있으며, 이 를 통해 페이지에서 컴포넌트의 questionName 값을 받아올 수 있습니다.

사용예시

function handleQuestionNameChange(컴포넌트의 questionName) {
    console.log(컴포넌트의 questionName);
  }
<QuestionInputAndList onQuestionNameChange={handleQuestionNameChange}/>

해결해야할 문제

1. Input의 Focus가 사라졌을 시 검색 가능 리스트가 사라지지 않습니다! 이유는 input에 onBlur 함수를 지정하고 onBlur시 검색 가능 리스트를 보이지 않게하면, 검색 가능리스트의 onClick 이벤트가 실행될 수 없습니다. input의 onBlur가 QuestionBtn의 onClick 함수보다 우선적으로 수행되기 때문입니다. 예전 과제중 달력만들기 과제를 생각하면 도움이 될 수도 있겠네요!

[netlify]

❌ Deploy Preview for solutionbank-web failed.

Name	Link
🔨 Latest commit	567d1c6
🔍 Latest deploy log	https://app.netlify.com/sites/solutionbank-web/deploys/62d8b814d7a0960008264892