[Feat] NaverMap View를 Rx형태로 쓸수 있도록 MapContainerView 생성

HealthFoodMe/HealthFoodMe/Domain/Model/Map/MainMapScene/MainMapModel.swift

@@ -7,6 +7,13 @@
 
 import Foundation
 
-struct MainMapModel {
+struct MapPointDataModel {
+  let latitude: Double
+  let longtitude: Double
+  let type: PointerType
+}
 
+enum PointerType {
+  case normalFood
+  case healthFood
 }

HealthFoodMe/HealthFoodMe/Global/Resources/Assets.xcassets/Map/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

HealthFoodMe/HealthFoodMe/Global/Resources/Assets.xcassets/Map/icn_diet.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_diet.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "icn_diet@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "icn_diet@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

HealthFoodMe/HealthFoodMe/Global/Resources/Assets.xcassets/Map/icn_diet_selected.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_diet_selected.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "icn_diet_selected@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "icn_diet_selected@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

HealthFoodMe/HealthFoodMe/Global/Resources/Assets.xcassets/Map/icn_normal.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_normal.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "icn_normal@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "icn_normal@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

HealthFoodMe/HealthFoodMe/Global/Resources/Assets.xcassets/Map/icn_normal_seleted.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "icn_normal_seleted.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "icn_normal_seleted@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "icn_normal_seleted@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

HealthFoodMe/HealthFoodMe/Presentation/Map/MainMapScene/Views/mapContainerView + Reactive.swift

@@ -0,0 +1,26 @@
+//
+//  NaverMapContainerView + Reactive.swift
+//  NaverMap + RxDelegate
+//
+//  Created by 송지훈 on 2022/07/12.
+//
+
+import NMapsMap
+import RxCocoa
+import RxSwift
+
+extension Reactive where Base: NaverMapContainerView {
+  internal var pointList: Binder<[MapPointDataModel]> {
+    return Binder(self.base) { containerView, points in
+      containerView.pointList.accept(points)
+    }
+  }
+}
+
+extension Reactive where Base: NaverMapContainerView {
+  internal var currentSelectPoint: Binder<MapPointDataModel> {
+    return Binder(self.base) { containerView, point in
+      containerView.setSelectPoint.accept(point)
+    }
+  }
+}

HealthFoodMe/HealthFoodMe/Presentation/Map/MainMapScene/Views/mapContainerView.swift

@@ -0,0 +1,128 @@
+//
+//  NaverMapContainerView.swift
+//  NaverMap + RxDelegate
+//
+//  Created by 송지훈 on 2022/07/12.
+//
+
+import Foundation
+import NMapsMap
+import RxRelay
+import RxSwift
+
+final class NaverMapContainerView: UIView{
+
+  private let disposeBag = DisposeBag()
+  private var markers = [NMFMarker]()
+  private var previousMarker: NMFMarker? = nil
+  private var selectedMarker: NMFMarker? = nil
+  var naverMapView = NMFNaverMapView()
+  var delegate: NMFMapViewTouchDelegate?
+  var pointList = PublishRelay<[MapPointDataModel]>()
+  var setSelectPoint = PublishRelay<MapPointDataModel>()
+  var disableSelectPoint = PublishRelay<Void>()
+
+  override init(frame: CGRect) {
+    super.init(frame: frame)
+    bindRelay()
+    setUI()
+    moveCameraPosition(NMGLatLng(lat: 37.5666102, lng: 126.9783881))
+  }
+
+  required init?(coder aDecoder: NSCoder) {
+    super.init(coder: aDecoder)
+    bindRelay()
+    setUI()
+    moveCameraPosition(NMGLatLng(lat: 37.5666102, lng: 126.9783881))
+  }
+}
+
+extension NaverMapContainerView {
+  private func setUI() {
+    naverMapView = NMFNaverMapView(frame: self.frame)
+    naverMapView.showLocationButton = true
+    naverMapView.mapView.positionMode = .compass
+
+    addSubview(naverMapView)
+
+    naverMapView.snp.makeConstraints { make in
+      make.edges.equalToSuperview()
+    }
+
+  }
+
+  private func moveCameraPosition(_ point: NMGLatLng) {
+    let cameraUpdate = NMFCameraUpdate(scrollTo: point)
+    cameraUpdate.animation = .fly
+    cameraUpdate.animationDuration = 2
+    naverMapView.mapView.moveCamera(cameraUpdate)
+  }
+
+  private func bindRelay() {
+    pointList.subscribe(onNext: { [weak self] pointList in
+      guard let self = self else { return }
+      self.setPointMarkers(pointList)
+    }).disposed(by: self.disposeBag)
+
+    setSelectPoint.subscribe(onNext: { [weak self] selectedPoint in
+      self?.setClickedMarker(selectedPoint)
+    }).disposed(by: self.disposeBag)
+
+    disableSelectPoint.subscribe(onNext: { [weak self] in
+      self?.disableAllMarker()
+    }).disposed(by: self.disposeBag)
+
+  }
+
+  private func setPointMarkers(_ points: [MapPointDataModel]) {
+    DispatchQueue.global(qos: .default).async {
+      for point in points {
+        let marker = NMFMarker()
+        marker.position = NMGLatLng.init(lat: point.latitude, lng: point.longtitude)
+        self.setMarkState(mark: marker, selectState: false)
+        marker.touchHandler = { _ in
+          if let seletedMark = self.selectedMarker {
+            self.setMarkState(mark: seletedMark, selectState: false)
+          }
+          self.setMarkState(mark: marker, selectState: true)
+          self.setSelectPoint.accept(point)
+          self.selectedMarker = marker
+          return true
+        }
+        self.markers.append(marker)
+      }
+      DispatchQueue.main.async { [weak self] in
+        guard let self = self else { return }
+        for marker in self.markers {
+          marker.mapView = self.naverMapView.mapView
+        }
+      }
+    }
+  }
+
+  private func setClickedMarker(_ selectedPoint: MapPointDataModel) {
+    let NMGPosition = NMGLatLng(lat: selectedPoint.latitude,
+                                lng: selectedPoint.longtitude)
+    guard let marker = markers.filter({ point in
+      return point.position == NMGPosition
+    }).first else { return }
+    moveCameraPosition(NMGPosition)
+    if let seletedMark = self.selectedMarker {
+      setMarkState(mark: seletedMark, selectState: false)
+    }
+    setMarkState(mark: marker, selectState: true)
+    self.selectedMarker = marker
+  }
+
+  private func disableAllMarker() {
+    guard selectedMarker != nil else { return }
+    setMarkState(mark: selectedMarker!, selectState: false)
+  }
+
+  private func setMarkState(mark: NMFMarker, selectState: Bool) {
+    let iconName = selectState ? "icn_normal_seleted" : "icn_normal"
+    mark.iconImage = NMFOverlayImage.init(image: UIImage(named: iconName) ?? UIImage())
+  }
+}
+
+

HealthFoodMe/HealthFoodMe/Presentation/Map/MainMapScene/Views/mapContainerViewDelegateProxy.swift

@@ -0,0 +1,37 @@
+//
+//  NaverMapContainerViewDelegateProxy.swift
+//  NaverMap + RxDelegate
+//
+//  Created by 송지훈 on 2022/07/12.
+//
+
+import NMapsMap
+import RxCocoa
+import RxSwift
+
+final class NaverMapContainerViewDelegateProxy: DelegateProxy<NaverMapContainerView,NMFMapViewTouchDelegate>,DelegateProxyType, NMFMapViewTouchDelegate {
+  static func registerKnownImplementations() {
+    self.register { (object) ->  NaverMapContainerViewDelegateProxy in
+      NaverMapContainerViewDelegateProxy(parentObject: object, delegateProxy:self)
+    }
+  }
+
+  static func currentDelegate(for object: NaverMapContainerView) -> NMFMapViewTouchDelegate? {
+    return object.naverMapView.mapView.touchDelegate
+  }
+
+  static func setCurrentDelegate(_ delegate: NMFMapViewTouchDelegate?, to object: NaverMapContainerView) {
+    object.naverMapView.mapView.touchDelegate = delegate
+  }
+}
+
+extension Reactive where Base: NaverMapContainerView {
+  var delegate: DelegateProxy<NaverMapContainerView,NMFMapViewTouchDelegate> {
+    return NaverMapContainerViewDelegateProxy.proxy(for: self.base)
+  }
+
+  var mapViewClicked: Observable<Void> {
+    return delegate.methodInvoked(#selector(NMFMapViewTouchDelegate.mapView(_:didTapMap:point:)))
+      .map { _ in return ()}
+  }
+}