ItemView

2021-07-06

by Seok

Step.1

ItemViewModel, Storage 생성

• Protocol로 메서드 구현하여 테스트에 용이하도록 구현
• Dummy Data 만들어서 추후 View에 bind예정
• 추후 필요시 Delete 메서드 추가
• 임의로 3개의 unit data 특정 시간마다 변경 로직 필요

import Foundation
import RxSwift

class ItemStorage: ItemStorageType {
    
    private var storage:[Unit] = [
        //Dummy Data
        Unit(uuid: 0, image: .cPlusPlus, level: 1, count: 1),
        Unit(uuid: 1, image: .java, level: 1, count: 1),
        Unit(uuid: 2, image: .kotlin, level: 1, count: 1),
        Unit(uuid: 3, image: .swift, level: 1, count: 1)
    ]
    
    private lazy var unitStorage = BehaviorSubject(value: storage)
    
    @discardableResult
    func create(item: Unit) -> Observable<Unit> {
        storage.append(item)
        unitStorage.onNext(storage)
        return Observable.just(item)
    }
    
    @discardableResult
    func list() -> Observable<[Unit]> {
        return unitStorage.asObservable()
    }
    
    @discardableResult
    func update(previous: Unit, new: Unit) -> Observable<Unit> {
        if let index = storage.firstIndex(where: { $0.uuid == previous.uuid}) {
            storage.remove(at: index)
            storage.insert(new, at: index)
        }
        unitStorage.onNext(storage)
        return Observable.just(new)
    }
}

2021-07-07

by Seok

Step.2

ItemCell 클릭하면 해당 정보 mainView에 표시

• 추후 name, level, money 정보가 필요하여 mainImageView custom으로 수정 예정
• UICollectionViewDelegateFlowLayout 처리 객체 설정(self)

private func setupDelegate() {
    itemCollectionView.rx.setDelegate(self).disposed(by: rx.disposeBag)
        
    itemCollectionView.rx.modelSelected(Unit.self)
        .subscribe(onNext: { [unowned self] unit in
            self.mainItemImageView.image = UIImage(named: unit.image)
        }).disposed(by: rx.disposeBag)
}

2021-07-08

by Seok

Step.3

ItemViewModel 로직구현

func bindViewModel() {
        
    viewModel.itemStorage
        .drive(itemCollectionView.rx.items(cellIdentifier: ItemCell.identifier, cellType: ItemCell.self)) { [unowned self] row, unit, cell in
            if row == 0 { self.setupItemInfomation(from: unit) }
            cell.configure(unit: unit)
        }.disposed(by: rx.disposeBag)
        
    viewModel.isPossibleToLevelUp
        .subscribe(onNext: { [unowned self] levelUp in
            self.observeLevelUpButton(levelUp)
        }).disposed(by: rx.disposeBag)
        
    cancelButton.rx.action = viewModel.cancelAction
}

Step4.

MainItemCustomView 생성(xib)

• background image는 임의로 지정

import UIKit

final class MainItemView: UIView {
    
    @IBOutlet var contentView: UIView!
    @IBOutlet weak var backgroundImageView: UIImageView!
    @IBOutlet weak var itemImageView: UIImageView!
    @IBOutlet weak var levelLabel: UILabel!
    @IBOutlet weak var nameLabel: UILabel!

    required init?(coder: NSCoder) {
        super.init(coder: coder)
        loadXib()
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        loadXib()
    }
    
    func configure(_ info: Unit) {
        itemImageView.image = UIImage(named: info.image)
        nameLabel.text = info.image
        levelLabel.text = "\(info.level)"
    }
    
    private func loadXib() {
        let name = String(describing: type(of: self))
        Bundle.main.loadNibNamed(name, owner: self, options: nil)
        addSubview(contentView)
        contentView.frame = self.bounds
        contentView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    }
}

2021-07-14

by Seok

Step.5

• ViewController Update 이슈 수정완료
• ViewModel 중복 코드 삭제
• ViewModel -> ViewController Observer 코드 수정

func bindViewModel() {
        
    viewModel.itemStorage
        .drive(itemCollectionView.rx.items(cellIdentifier: ItemCell.identifier, cellType: ItemCell.self)) { _, unit, cell in
            cell.configure(unit: unit)
        }.disposed(by: rx.disposeBag)
        
    viewModel.isPossibleToLevelUp
        .subscribe(onNext: { [unowned self] levelUp in
            self.observeLevelUpButton(levelUp)
        }).disposed(by: rx.disposeBag)
        
    viewModel.selectedUnit
        .subscribe(onNext: { [unowned self] unit in
            self.setupItemInfomation(from: unit)
        }).disposed(by: rx.disposeBag)
        
    viewModel.money
        .map {String($0)}
        .drive(mainItemView.availableMoneyLabel.rx.text)
        .disposed(by: rx.disposeBag)
                
    cancelButton.rx.action = viewModel.cancelAction
}