🦋 INFONAVI

검색어 조회 사이트

👆 Logo 클릭 시, 배포된 주소로 이동됩니다.

🖥️ 구현 화면

🔥 기능 소개

⌨️ 키보드 입력

• 검색창 클릭 후 "Enter" 키 입력 시, (최대 5개의) 최근 검색어 가 출력됩니다.
• 검색어 입력 완료 후 'Enter' 혹은 '🔎' 버튼 클릭 시, 검색 결과 페이지로 이동한다는 알림창을 출력합니다.
• 상/하 방향키 입력 시, 특정 위치의 최근/연관 검색어 에 대해 강조 효과가 발생합니다.

📺 ux

• 검색어(키워드) 입력 시, 복수의 연관 검색어가 출력됩니다.
  • 키워드에 대한 연관 검색어를 찾지 못한 경우, '검색 결과가 없습니다' 라는 문구가 출력됩니다.
• 현재 작성 중인 검색어와 연관 검색어의 일부가 일치 할 경우, 해당 단어의 폰트가 굵게 표시됩니다.
• 최근에 검색한 적이 있는 키워드에 대해서 '🌀' 표식이 남습니다.
• 특정 최근/연관 검색어에 마우스를 올리면, 애니메이션이 동작합니다.

🚨 주의사항

• 연관 검색어가 적거나 적절치 않을 수 있습니다.
• glitch 를 통해 배포한 json-sever 를 통해 연관 검색어를 응답 받습니다. 서비스 방문 직후, 연관 검색어 응답이 제대로 이뤄지지 않을 수 있습니다.
  • (검색어를 조금 입력하다 보면, 10초~30초 중 정상작동 합니다. 😅)
• 해당 프로젝트는 사용자의 입력에 따라 최근/연관 검색어를 출력하는 기능을 구현하는 것이 목적입니다. 즉, 검색 결과 페이지로의 이동 구현되지 않았습니다.

📅 프로젝트 기간

23.12.28 ~ 23.01.05

👨‍🦲 프로젝트 인원

이윤신 @TransparentDeveloper

📚 문서 정리

😁 설계/개발 과정 단계에서 작성한 무서는 해당 저장소 wiki 에 작성해두었습니다.

Github Wiki 바로가기