duo2208 / react-search Goto Github PK

[만들면서 학습하는 리액트]

• 🏃‍♀️ 검색용 데이터는 elasticSearch 색인을 사용한다.
• 🏃‍♀️ typescript 를 사용하도록 리팩토링 한다.

• 1-vanilla: 1편에서 만든 어플리케이션 (자바스크립트만 사용)
• 2-react: 2편에서 다시 만든 어플리케이션 (리액트 사용)
• 3-component: 3편에서 다시 만든 어플리케이션 (리액트 컴포넌트 사용)
• 🏃‍♀️ 4-typescript: 타입스크립트를 적용한 어플리케이션 (타입스크립트 사용)

• 검색폼 구현

  • 검색 상품명 입력 폼이 위치한다.
  • 검색어를 입력하면 x버튼이 보이고 없으면 x버튼을 숨긴다.
  • 엔터를 입력하면 검색 결과가 보인다.
  • x 버튼을 클릭하거나 검색어를 삭제하면 검색 결과를 삭제한다.

• 검색 결과 구현

  • 검색 결과가 검색폼 아래 위치한다. 검색 결과가 없을 경우와 있을 경우를 구분한다.
  • x버튼을 클릭하면 검색폼이 초기화 되고, 검색 결과가 사라진다.

• 탭 구현

  • 추천 검색어, 최근 검색어 탭이 검색폼 아래 위치한다.
  • 기본으로 추천 검색어 탭을 선택한다.
  • 각 탭을 클릭하면 탭 아래 내용이 변경된다.

• 🏃‍♀️ 추천 검색어 구현

  • 번호, 추천 검색어 이름이 목록 형태로 탭 아래 위치한다.
  • 목록에서 검색어를 클릭하면 선택된 검색어의 검색 결과 화면으로 이동한다.

• 🏃‍♀️ 최근 검색어 구현

  • 최근 검색어, 이름, 검색일자, 삭제 버튼이 목록 형태로 탭 아리 위치한다. (추천 검색어와 비슷)
  • 목록에서 검색어를 클릭하면 선택된 검색어로 검색 결과 화면으로 이동한다. (추천 검색어와 같음)
  • 목록에서 x버튼을 클릭하면 선택된 검색어가 목록에서 삭제된다.
  • 검색시마다 최근 검색어 목록에 추가된다.

• 🏃‍♀️ 자동 완성 구현