당근 마켓의 지도 검색범위 설정을 구현해 보려고 한다. 범위를 설정해서, 해당 범위내 있는 상품들만 조회할 수 있게 하려고 한다.
먼저 플로우를 생각해봤다.
1. 네이버의 GeoLocation을 사용해서 본인의 ip를 통해 경도와 위도를 반환한다. 반환한 좌표를 통해 지도에 본인 위치를 표시한다.
2. input 태그의 range를 이용하여 범위를 지정한다. 범위는 1 ~ 5km로 설정할 수있다.
3. 범위에 따라 네이버 지도에 원 크기가 달라진다. 해당 범위내 행정복지센터의 좌표가 있으면, 해당 동 이름을 카운트해
"(본인의 행정동)외 14개동 조회" 라고 표시한다.
4. db에 [회원ID, 위도, 경도, 행정동 명, 검색범위] 를 저장시킨다.
'Clozet [프로젝트]' 카테고리의 다른 글
[nginx] 리액트 + 스프링부트 프로젝트 배포 (0) | 2023.11.18 |
---|---|
[프로젝트] 물품 장바구니,구매 예외처리하기 (0) | 2023.10.29 |
[React] useInfiniteQuery를 사용한 무한스크롤 구현 (0) | 2023.10.14 |
[Project] Clozet 프로젝트 시작 (0) | 2023.09.23 |