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

[i-colours-u]

🔥 Pull requests

⛳️ 작업한 브랜치

• feature/[feat] NaverMap + Rx 기능 만들기 #35

👷 작업한 내용
NaverMap을 Rx 형태로 쓰기 쉽도록 MapContainerView를 생성했습니다.
좌표 데이터만 배열 형태로 넘기면 - 지도에 띄워질 수 있도록 처리했습니다. (bind 가능)
특정 가게를 눌렀을 때 이벤트를 subscribe 할 수 있습니다.

🚨 참고 사항

아래 스크린샷과 같이, Input Output을 다음과 같이 처리하면 쉽게 Map 이벤트들을 처리할 수 있습니다.

예시 사용법을 나타내기 위해 다음 코드를 첨부합니다!

import UIKit
import SnapKit
import NMapsMap
import RxSwift
import RxRelay

class ViewController: UIViewController {
  private let buttonTapEvent = PublishRelay<Void>()
  private let disposeBag = DisposeBag()
  let sampleView = NaverMapContainerView()
  let sampleButton = UIButton() // 특정 위치를 선택하기 위한 버튼
  
  override func viewDidLoad() {
    super.viewDidLoad()
    setUI()
    sampleViewInputEvent()
    sampleViewOutputEvent()
    setButtonAction()
  }
}
extension ViewController {
  
  private func setUI() {
    sampleButton.backgroundColor = .red
    
    view.addSubview(sampleView)
    view.addSubview(sampleButton)
    
    sampleView.snp.makeConstraints { make in
      make.edges.equalToSuperview()
    }
    
    sampleButton.snp.makeConstraints { make in
      make.width.height.equalTo(50)
      make.top.equalToSuperview().offset(50)
      make.trailing.equalToSuperview().offset(-50)
    }
  }
  
  private func setButtonAction() {
    sampleButton.addTarget(self, action: #selector(buttonTapped), for: .touchUpInside)
  }
  
  private func sampleViewInputEvent() {
    makeDummyPoints()
      .bind(to: sampleView.rx.pointList)
      .disposed(by: self.disposeBag)
    
    buttonTapEvent
      .subscribe(onNext: { _ in
        self.sampleView.setSelectPoint.accept(MapPointDataModel.init(latitude: 37.010, longtitude: 126.9784147, type: .normalFood)
)
        
      }).disposed(by: self.disposeBag)
  }
  
  private func sampleViewOutputEvent() {
    sampleView.rx.mapViewClicked
      .subscribe(onNext: { _ in
        self.sampleView.disableSelectPoint.accept(())
      }).disposed(by: self.disposeBag)
    
    sampleView.setSelectPoint
      .subscribe(onNext: { [weak self] dataModel in
        print(dataModel)
      }).disposed(by: self.disposeBag)
  }
  
  private func makeDummyPoints() -> Observable<[MapPointDataModel]> {
    return .create { observer in
      let pointList: [MapPointDataModel] = .init([
        MapPointDataModel.init(latitude: 37.5666805, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.567, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.568, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.569, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.557, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.571, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.572, longtitude: 126.9784147, type: .normalFood),
        MapPointDataModel.init(latitude: 37.010, longtitude: 126.9784147, type: .normalFood)
      ])
      observer.onNext(pointList)
      return Disposables.create()
    }
  }
  
  @objc func buttonTapped() {
    buttonTapEvent.accept(())
  }
}

📟 관련 이슈

• Resolved: [feat] NaverMap + Rx 기능 만들기 #35

[0inn]

지훈 선배 .. 바로 Map 쓰러 갑니다 .. 고생하셨습니다 ..

[L-j-h-c]

많이 배워갑니다... 나중에 다시 정독해볼게요