필수 구현사항
로딩 컴포넌트 만들기
데이터를 불러오는 중일 때, 현재 데이터를 불러오는 중임을 유저에게 알리는 UI를 추가해야 합니다.
해법 : await - async 기간 동안 별도의 로딩 화면을 덮어 해결하기
랜덤 버튼 추가하기
SearchInput 옆에 버튼을 하나 배치하고, 이 버튼을 클릭할 시 /api/cats/random 을 호출하여 화면에 뿌리는 기능을 추가합니다. 버튼의 이름은 마음대로 정합니다.
해법 : keyword를 랜덤하게 가지는 별도의 API 및 클래스 추가
모달 제어
이미지를 검색한 후 결과로 주어진 이미지를 클릭하면 모달이 뜨는데, 모달 영역 밖을 누르거나 / 키보드의 ESC 키를 누르거나 / 모달 우측의 닫기(x) 버튼을 누르면 닫히도록 수정해야 합니다.
모달에서 고양이의 성격, 태생 정보를 렌더링합니다. 해당 정보는 /cats/:id 를 통해 불러와야 합니다.
해법 : imageInfo 내 모달의 정보를 종합하여 전달하고 Setstate 기능을 활용하여 열기, 닫기 기능 구현
스크롤 & 다음 페이지 로딩
검색 결과 화면에서 유저가 브라우저 스크롤 바를 끝까지 이동시켰을 경우, 그 다음 페이지를 로딩하도록 만들어야 합니다.
과제 API 명세에 page에 대한 내용이 없습니다. 아래처럼 작업을 해주세요
-- /cats/search?page=1, /cats/search?page=2처럼 엔드포인트에 page라는 파라미터를 추가해 주세요
-- 1페이지는 파라미터를 붙일 필요 없습니다.
-- page 파라미터를 제어하는 상태를 추가하여 작성해 보세요.
해법 : 추가적인 API 추가로 다음 페이지 구현 및 불러오기
로컬스토리지 다루기
최근 검색한 키워드를 SearchInput 아래에 표시되도록 만들고, 해당 영역에 표시된 특정 키워드를 누르면 그 키워드로 검색이 일어나도록 만듭니다. 단, 가장 최근에 검색한 5개의 키워드만 노출되도록 합니다.
페이지를 새로고침해도 마지막 검색 결과 화면이 유지되도록 처리합니다.
해법 : LocalStorgae 기능을 활용해 데이터를 저장해두고 Slice를 통해 갯수를 제한한다.
그리고 SearchResult 함수 내부를 수정해 검색 내용 또한 LocalStorage에 저장하도록 한다.
기타
페이지 진입 시 포커스가 input 에 가도록 처리하고, 키워드를 입력한 상태에서 input 을 클릭할 시에는 기존에 입력되어 있던 키워드가 삭제되도록 만들어야 합니다.
this.$searchInput.setAttribute('autofocus', '');
오토포커스 사용으로 페이지 로드 시 집중하게 만들기
this.$searchInput.value = ''
서치인풋 입력이벤트 마지막에 내부 밸류 비워주는 코드 추가하기
