User Card 'X' 버튼 이벤트 구현

[Minny27]

Motivation ⍰

• 유저 카드에서 'X' 버튼 클릭 시 로티 애니메이션 표시를 0.5초간 유지 후, 다음 유저 카드로 스크롤
• 타이머의 상태를 .over로 변경

Key Changes 🔑

미리보기는 다음과 같습니다.

• 이전에는 타이머의 재개, 멈춤이 구현되어 있지 않았는데, 'X' 버튼 클릭 시, 구독을 끊고 타이머의 상태를 .over로 해야 하다보니 timer 클래스를 따로 구현할 필요가 있었습니다.
  코드는 다음과 같습니다.

// FallingUserCollectionViewCellModel
final private class Timer {
  private var disposable: Disposable? = nil
  
  let currentTime = BehaviorRelay<Double>(value: 13.0) // emit할 값
  private var startTime: Double // 멈춘 다음에 재개 시 시작할 시간 상태 값
  
  init(startTime: Double) {
    self.startTime = startTime
  }
  
  func start() {
    guard disposable == nil else { return }
    
    disposable = Observable<Int>.interval(.milliseconds(10),
                                          scheduler: MainScheduler.instance)
    .take(Int(startTime * 100) + 1)
    .map { [weak self] value in
      guard let self = self else { return 0.0 }
      return round((self.startTime * 100 - Double(value))) / 100
    }
    .debug()
    .bind(to: currentTime)
  }
  
  func pause() {
    startTime = currentTime.value
    disposable?.dispose()
    disposable = nil
  }
}

func transform(input: Input) -> Output {
    let timer = Timer(startTime: 13.0) // timer class
    let user = Driver.just(self.userDomain)
    
    let timerActiveTrigger = input.timerActiveTrigger
    
    let rejectButtonAction = input.rejectButtonTrigger
      .do(onNext: { _ in
        timer.pause()
        timer.currentTime.accept(-1.0) // reject 시에는 0.5초 후에 넘어 가야하는 제약이 있어서, 0초로 설정하지 않았고, reject 버튼 이벤트에 대한 처리는 상위 뷰에서 따로 처리하고 있음.
      })
    
    let likeButtonAction = input.likeButtonTrigger
    
    let timeActiveAction = timerActiveTrigger
      .do { value in
        if !value {
          timer.pause() // 시간 활성화 안 됐을 시, 멈춤
        } else {
          timer.start() // 시간 됐을 시, 재개
        }
      }
    
      { ... }
  }

사이드 이팩트나 더 좋은 방법이 있으면 제안해주세요. :)

To Reviewers 🙏🏻

• 'X' 버튼 클릭 시, 로티 애니메이션 표시되는 지 확인해주세요.
• 타이머의 상태가 초기화된 상태로 돌아가는 지 확인해주세요.
• 다음 셀로 스크롤되는 지 확인해주세요.

Linked Issue 🔗

• 'x' 버튼 이벤트 구현 #72

[ibcylon]

고생하셨습니다.

코드를 샅샅히 보지는 못했습니다.

질문

1. timer를 class로 분리한 이유?
2. cancellable timer, repeatable timer로 리팩토링 생각있는지?
3. diffable 사용할 때 snapshot afterAnimation true/false에 대한 차이를 알고 계신지?

제안

1. FallingCellViewModel에서 timer class와 timer state는 파일 분리하는 것이 좋을 것 같습니다. 가독성 측면에서도
2. timer state의 enum 값 이름 변경 표시되는 값 5초와 실 시간 8초와의 괴리도 있고, 수정이 발생할 때마다 간극이 더 벌어질 것 같습니다. 따라서 stage#,이나 phase#으로 바꾸는 것이 어떨까요?

[Minny27]

1. timer를 class로 분리한 이유?

• pause, start 함수로 구현해야 하다보니 분리해야 했습니다.
• 또한, pause 시 해제를 구현해야 하다보니 timer에서 구독, 해제를 구현해야 했습니다.

2. cancellable timer, repeatable timer로 리팩토링 생각있는지?

• 좋은 거 같습니다
• cancellable과 disposable은 어떻게 차이가 있을 지 궁금합니다.

3. diffable 사용할 때 snapshot afterAnimation true/false에 대한 차이를 알고 계신지?

• animatingDifferences를 말씀하시는 걸까요?

4. FallingCellViewModel에서 timer class와 timer state는 파일 분리하는 것이 좋을 것 같습니다. 가독성 측면에서도
   timer state의 enum 값 이름 변경 표시되는 값 5초와 실 시간 8초와의 괴리도 있고, 수정이 발생할 때마다 간극이 더 벌어질 것 같습니다. 따라서 stage#,이나 phase#으로 바꾸는 것이 어떨까요?

• stage, phase 파라미터로 생성하는 거 좋은 거 같습니다.
• 리팩토링 해보겠습니다.