Feat : 내 위치 찾기 기능 구현

[Sangjun-man]

Motivation

• 플러터에 현재 위치 좌표를 요청하고, 현재 위치 좌표 값을 받아 해당 위치로 맵을 이동시킵니다

• 내 현재 위치 마커 구현

  • 마커 ui는 @component/MapComp/PulsingDotMarker.tsx 내에 구현되었습니다
  • @component/MapComp/eventHandler/drawPulsingDotMarker.ts로 실제 마커를 랜더링합니다

• 플러터 통신 코드 구현

  • @libs/webview/ 내의 플러터 통신 관련 코드에 setMyLocation 키워드의 함수, enum이 추가되었습니다

• 맵 이동 코드 구현

  • mapBox의 map.flyTo() 메서드로 내 현재 지도 위치를 부드럽게 변경합니다
  • @states/cameraStateAtom 에는 현재 내가 지도를 보고있는 카메라 상태를 담습니다

Key Changes

• window.jsChannel 추가

플러터에서 웹으로 통신할때 실행되는 함수

• 플러터 -> 웹으로 통신하는 경우, 데이터를 전달하는 것이 아닌 flutter의 웹뷰컨트롤러에서 직접 함수를 실행하는 방식입니다.
  위의 코드를 보면 알 수 있듯 runJavaScript('window.flutterChannel(...)')같은 형태입니다. postMessage로 string값을 전달하는게 아니라, eval()처럼 문자열 형태의 코드를 파싱하고 실행시켜 주는 것 같습니다 ( @sjsjsj1246 죄송 스트링값을 데이터로 전달하는게 아닙니더..)

• 이전 커밋에서 웹 -> 플러터로 통신하던 방법은, flutter에서 특정 string 값을 채널 명으로 하여 채널을 생성하게 되면 웹에서는 해당 채널에 쟈window[채널명].postMessage로 데이터를 전달하는게 가능했습니다.
  ex) flutter에서 'flutterChannel' 이라는 채널 생성 -> 웹에서 window.flutterChannel.postMessage()로 플러터에 데이터 전송

• 플러터 -> 웹 통신을 구현 하기 위해, 웹에서는 플러터에서 runJavascript로 실행시킬 수 있는 함수를 window에 전역변수로 등록하는데 이 함수명이 플러터에서 등록한 채널명과 동일한 경우, 플러터에서 생성한 채널이 웹에서 작성한 핸들러 함수로 덮어씌워져서, 웹 -> 플러터로 postMessage 보낼 수 있는 채널이 사라지게 되었습니다
  flutter에서 'flutterChannel' 채널생성 -> 웹에서 window.flutterChannel = flutterMessageHandler 로 덮어쓰기 -> window.flutterChannel.postMessage() 불가능

• 따라서 웹 -> 플러터 통신을 위해 기존에 사용하던 채널명인 'flutterChannel'이 아닌 'jsChannel' 이라는 값으로 웹 -> 플러터로 postMessage 할 수 있는 새로운 채널을 개설하였습니다

제안사항

• flutterChannel, jsChannel >> flutter네이밍 변경 제안
  • 기존 코드와 유사한 네이밍을 위해, 웹 -> 플러터 통신을 위한 채널명을 jsChannel로 하여 코드를 작성했지만, 통신의 방향성이 드러나지 않아서 좋은 네이밍이 아니라고 생각합니다.
  • flutterChannel의 경우 사실은 데이터가 전송되는 것이 아닌, runJavacsript() 메서드로 실제 함수를 실행시켜주는 방식이다 보니 Channel이라는 단어 사용이 좋은 네이밍이 아니라고 생각합니다.
  • 그래서 네이밍 변경 제안 flutterChannel -> appToWebAction / jsChannel -> webToAppChannel
    정도로 바꿔보면 어떨까요?? 더 좋은 네이밍이 분명 있을거같은데,, 다른 의견도 주시면 좋겠습니다~!

스크린샷

• 내 위치 마커

https://user-images.githubusercontent.com/66112027/219881010-10457606-bf53-4211-873e-bb8f5544331f.mov

• 내 위치 찾기

https://user-images.githubusercontent.com/66112027/219881014-f6ef37cb-4de1-4604-bb09-d92d790e2ebf.mov

• 웹 환경에서 내 위치를 가져올수 없기 때문에 맵 범위 내 랜덤 값으로 이동하도록 구현해두었습니다.
• 하단의 토스트 메세지는 앱에서 디버깅을 위해 development 환경에서만 작동하도록 해두었습니다.

To Reviewers

• 변수명, 함수명 등을 중점적으로 보며 검토해주세요~

[netlify[bot]]

✅ Deploy Preview for hipspot-webview ready!

Name	Link
🔨 Latest commit	7556ad71605b7556b25e0e8c55580f44d4d308f8
🔍 Latest deploy log	https://app.netlify.com/sites/hipspot-webview/deploys/63f11217c4b7c30008c25a4e
😎 Deploy Preview	https://deploy-preview-54--hipspot-webview.netlify.app/
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.