[RxSwift] CollectionView, CustomView, 버튼 모듈화

소복소복에서 MVVM과 RxSwift를 녹여보겠다는 다짐을 하고 공부를 하고 있는데요!
제가 설계한 뷰의 구조와 Rx를 사용한 CollectionView 만드는 법에 대해 포스팅 하려고 합니다.
(아직 공부하고 있는 단계라 많이 부족하니 .. )

우선 위와 같이 뷰를 잘게잘게 나눴습니다.
뷰를 나누면서 고민한 것은 버튼의 모듈화, 재사용 뷰 이 2가지 입니다.

NavgatiionBar같은 경우 다른 뷰에서 계속 사용이 됩니다.
따라서 NavigationView라는 클래스를 새로 만들어 뒤로가기 버튼, 약 전송하기, 취소 컴포넌트를 넣어 재사용할 수 있게끔 만들었습니다.

버튼 같은 경우는 SobokButton이라는 새로운 CustomButton을 만들어 enum에 따라 사용할 수 있게끔 하였습니당. (추후 포스팅 예정)

enum ButtonMode: Int, CaseIterable {
    case lightMint
    case mainMint
    case inactive
    case active
}

final class SobokButton: UIButton {
.
.

그 다음으로는 컬렉션뷰에 대한 이야기입니다.
보통 컬렉션뷰를 만들 때 delegate, datasource를 만들어서 사용을 하였는데 RxSwift를 사용하니 엄청 간단하게 사용할 수 있게 되었습니다.

import UIKit

import RxSwift
import RxCocoa

final class AddPillFirstViewController: BaseViewController {
    
    private let disposeBag = DisposeBag()
    let addPillFirstView = AddPillFirstView()
    let viewModel = PillTimeViewModel()
    
    override func loadView() {
        self.view = addPillFirstView
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        bind()
    }
    
    override func style() {
        view.backgroundColor = .white
        tabBarController?.tabBar.isHidden = true
        navigationController?.isNavigationBarHidden = true
    }
    
    private func bind() {
        viewModel.pillTimeList.bind(to:
            addPillFirstView.collectionView.rx.items(cellIdentifier: "PillTimeCollectionViewCell", cellType: PillTimeCollectionViewCell.self))
        { index, text, cell in
            cell.timeLabel.text = text
        }
        .disposed(by: disposeBag)
        
        addPillFirstView.collectionView.rx.modelSelected(String.self)
            .subscribe(onNext: { text in
                print(text)
            })
            .disposed(by: disposeBag)
    }
}

ViewController의 역할을 줄이기 위해 UI는 addPillFirstView에서 구현을 했고 사진에서와 같이 컬렉션뷰에 보이는 시간 (오전 8:00) 같은 경우는 ViewModel 구조체를 만들어 사용했습니다.

import RxCocoa
import RxSwift

struct PillTimeViewModel {
    let pillTimeList = Observable.of(["오전 8:00", "오후 1:00", "오후 7:00"])
}

bind를 통해 CollectionView를 생성하고 배열의 값을 Cell의 라벨에 보여주었습니다.

(bind -> 데이터를 UI에 표시)
modelSelect 같은 경우 기존 didSelectItem과 같습니다.

Rx로 직접 구현하는 것이 익숙치 않아서 이만 말을 줄이겠습니다 ..
더 자세한 내용은 다음 글에서 포스팅하겠슴당 . . . .. . .!!!!!