[Mission005] 가게 찾기

[ganeodolu]

미션4

#10

기본 요구사항

1. 메인 화면을 구현합니다.

• 메인 화면에는 검색창, 검색된 갯수, 검색목록, 페이지로 구성됩니다.

2. 가게 검색 기능을 구현합니다.

• 화면 상단의 검색창에서 가게를 검색할 수 있습니다.
• 검색어 입력 후, enter 키를 누르거나 검색 버튼을 클릭 시 검색됩니다.
• 검색된 목록은 번호, 가게명, 주소로 구성됩니다.

3. 페이지를 구현합니다.

• 검색목록은 한페이지당 10개씩 구성됩니다.
• 페이지는 한번에 5개까지 볼 수 있으며, 이전과 다음버튼으로 이동가능합니다.

추가 요구사항

1. 검색 히스토리

• 검색 히스토리에 있는 검색어를 클릭하면 다시 검색됩니다.
• 최근 검색어 5개까지 보여줍니다.
• 검색 히스토리는 중복되지 않습니다.
• 검색 히스토리는 localStorage에 저장되며, 첫 실행시 저장된 최근 검색어를 불러옵니다.

2. 검색 결과가 느린 경우 처리방법

• 검색 결과가 느리게 나오도록 설정합니다.
• 결과가 나올때까지 로딩 효과 등으로 사용자에게 알리며, 오작동하지 않도록 합니다.

3. 카카오맵 API를 사용하여 Modal UI로 표시

• 검색결과 목록 중 하나를 선택하여 클릭하면 Modal UI에 카카오맵이 표시됩니다.
  ([191226] mission003 #8 미션3에서 사용한 UI를 참조)
• 카카오맵에서 가게 주소로 검색한 결과가 표시되며 가게명이름으로 마커 📍가 표시됩니다.
• ESC를 누르거나 Modal UI가 아닌 곳을 누르면 창이 닫힙니다.

미션방식

index.html - (App.js)
SearchStoreName : 키워드를 조회하여 API에서 가게정보 가져오기
ShowStoreList : 조회된 가게 리스트 보여주기
ShowHistoryList : LocalStorage에 저장된 검색어를 조회, 추가, 삭제 기능

ManagePage : 페이지 클릭시 버튼의 페이지를 가져오고, 최근검색어부분에서 키워드를 가져오고 API를 통해 가게정보 가져오기
ShowPage : 최대페이지를 감안하여 페이지 보여주기

ManageMap : 카카오맵 API를 이용하여 선택된 가게명, 가게주소를 Modal창에 보여주기

apiHandler는 지은님의 미션2코드를 사용하였습니다.

시행착오

카카오맵 구현시 모달UI를 띄운 뒤 map.relayout()을 실행해 주어야 지도가 제대로 표시되며
map.setCenter()를 맨 뒤에 실행해야 지도가 가게의 위치로 이동합니다.
카카오맵 infowindow의 크기가 고정이기때문에 가게이름이 전부 표시가 안되는 문제가 있어서 infowindow 대신에 커스텀오버레이를 사용하였습니다.

미션후기

Modal UI를 구현하기 위해서는 라이브러리가 꼭 필요한 것이 아니라 CSS의 설정에 따라 구현되는 것을 알았고, 평소에 지도표시 기능을 꼭 해보고 싶었는데 어설프게나마 구현해보아서 좋았습니다.
깔끔한 디자인을 구현하기 위해서는 CSS 공부가 많이 필요하다고 느꼈습니다.