dev-redo / language-explorer Goto Github PK

• 입력창이 focusout될 시 검색 list를 안 보이게 처리

Requirements

• 구성 요소를 컴포넌트화 하여 의존성 제거

• 언어 검색 시 fetch로 언어 목록 조회

  • req 함수를 별도로 정의
  • 검색어 입력하는 동안 디바운싱(200ms)으로 호출 지연
  • 항상 데이터를 요청하는 것이 아닌, 한 번 검색한 검색어일 경우 캐시를 이용하도록 함

• fetch한 언어 목록 렌더링

  • 현재 선택된 커서의 아이템을 강조 처리하기
  • 키보드의 화살표 위 아래 키를 이용해 추천 검색어 커서 옮기기

• 현재 커서가 가리키는 언어를 엔터키를 입력 시 선택처리 하기

• 마우스 클릭으로 선택 처리 하기

• 선택한 언어 리스트 중 5개만 렌더

  • 추천 검색어와 입력한 검색어가 일치하는 부분 강조처리 하기

• 새로고침에도 현재 상태 유지하게 하기

  • 전체 컴포넌트 Search의 state를 로컬 스토리지에 저장
  • 초기화 시 로컬스토리지에 저장된 상태가 있을 시 초기 state로 할당

• 맨 처음 초기화 시 입력창에 focus