[#23] 둘러보기 친환경 스팟 확인

[flowersayo]

테스트 방법

1. 꽃봉우리 스팟 정보

: SpotMainScreen 에 있는 sproutPlaces state의 객체 배열 정보를 수정하면 해당 상황에 맞는 화면을 테스트해볼 수 있습니다.

2. 내 위치 설정

가장 우측에 점세개버튼을 누르시면 애뮬레이터 상에서 사용자의 위치를 제어할 수 있는 Location 탭이 보입니다! 여기서 33.36,124.44 근방(제주도위치)으로 좌표 찍으시고 테스트해보셔도 좋습니다!!

01 첫화면 | 안내화면

사용자가 map에 처음 접속하면 사용자 상태(ex. 여행지 방문여부, 사용자 위치) 에따라 다른 모달창이 띄워집니다.

1. 모든 꽃봉우리 스팟(10개) 를 방문한경우
2. 반경 10km이내 주위에 친환경 스팟이 아무데도 없는경우
3. 1,2번이 아니라면 현재 방문하지 않은 꽃봉우리 스팟을 기준으로 ~개의 꽃을 받을 수 있다는 모달을 띄웁니다.

앱에 처음접속하는 경우 위치 정보 승인을 위한 모달창이 띄워집니다.

1번경우	2번경우	3번경우

02 마커 클릭

특정 스팟을 클릭하면 현재 유저의 위치와 해당 스팟의 거리차이를 계산하여 상황에 맞는 모달을 띄웁니다. 스팟과 유저사이의 거리가 *500m이내여야 도착한 것으로 간주합니다.

• 친환경 스팟에 도착했다는 기준을 예전에 300m 로 정했던 것 같은데 관광데이터 API에서 알려주는 좌표가 해당 스팟의 유의미한 장소가 아니라, 이상한 도로변(?)이나 풀밭 등 접근하기 힘든 구역으로 잡히는 경우도 있어서 300m는 어려울 것 같아서 우선 500m로 설정해두었습니다! -> 나중에 회의에서 다시 이야기 나눠보면 좋을 듯 합니다 :)

사진	사진

03 스팟 도착

유저가 특정 스팟의 마커를 클릭하고 유저와 해당 스팟간의 거리차이가 500m이내라면 도착 모달을 띄웁니다. 꽃받기 버튼을 클릭하면 -> 이미 꽃을 받은 스팟입니다 로 변경되고 맵상에 mapping되어있던 마커의 색도 오렌지->회색으로 변하게 됩니다.

사진	사진

04 리스트뷰

내위치중심은 사용자의 현재위치로부터 가장 가까운 spot 부터 보여주고, 지도중심은 사용자가 현재 맵상에서 보고 있는 지도 구역과 가까운 위치에 있는 spot들부터 보여줍니다.

내위치중심	지도중심

📃기타 전달사항

1. 제가 웬만한 경우의수는 다 시연해본 것 같은데..! 혹시라도,, 테스트해보면서 이상한 점 발견되시면 말씀해주세용 바로 수정하겠습니다.

2. 리스트뷰에서 사용자 인근의 친환경 스팟이 없는 경우 아래와 같은 화면이 나오면서 그 어떤 spot에 대한 정보도 제공되지 않게 됩니다.

즉, 주변에 친환경 스팟을 하나라도 인접하고 있어야 리스트뷰에서 보이게 되는데, 저는 이 기능이 오히려 독이 될 수 있겠다는 생각이 들었습니다.ㅜㅜ List view를 활용하는 이유는 설령 그 장소에 인접하지 않았더라도 오늘은 어떤 꽃봉우리 스팟이 있는지 설명해주는 스팟 전체보기 느낌인데, 주변 5km내외에 친환경 스팟이 없다고 해서 아예 아무것도 보여주지 않으면 어플 실 사용자의 대다수가 리스트뷰 기능에서 내위치중심,지도 중심 기능을 이용하지 못하고 아래 화면(친환경스팟x)만 보게 되지 않을까 싶습니다. 그래서 저는 어짜피 mapView에서 주변에 친환경 스팟이 없는지를 알려주는 모달을 띄운다면 굳이 리스트뷰에서까지 정보접근을 제한할 필요가 없다고 생각되는데 다른분들 의견이 궁금합니다!

덧붙여서 어플 평가하시는 분께서 제주도에 살고 계신게 아닌 이상 리스트뷰 기능을 열람할때 내위치중심,지도중심 기능을 시연해보지 못하실 뿐더러 주변에 친환경스팟이 없다라는 문구만 보게될 것 같습니다 😢

3.아직 최적화를 덜해서 쓸데없이 렌더링되거나 버벅이거나 하는 부분들이 있습니다😢 useMemo,useCallout, shouldComponentUpdate 활용해서 계속해서 리팩토링하면서 자연스럽게 동작할 수 있도록 계속적으로 수정해보겠습니다!

5. 원인을 모르겠는 문제들,,
   • 마커가 변할때 잠깐 기본마커로 보인다.

[flowersayo]

남은작업(피드백)

• [x] 리스트뷰에서 '주변에 친환경 스팟이 없어요' 화면 제거

• [x] 마커 제대로 보이도록

• [x] 둘러보기 NotFound 일러스트 수정

[SJ-Lee33]

확인 했습니다! 역시..👍👍 메인 풀 받고 충돌 해결 해주시고 머지 해주세요! 😍