[#58]Refactor: userCardDimView 커스텀

- TFBaseCollectionViewCell를 상속받은UserCardViewCollectionViewCell 구현
- DimView Manager 클래스를 따로 빼려고 했지만, 셀이 생성됐을 때의 x, y좌표를 알아야 해서 cell을 커스텀하는 방식으로 구현함.
- 또한, 셀 각각의 view model의 output을 구독하다보니 다른 셀에 대한 트리거를 처리하기 애매해서 미리 셀에 dimView를 추가해놓고
- 셀에서 시작 시간을 output으로 구독해서 타이머가 시작됐을 때 dim view를 hidden하는 방식으로 구현.
- 특정 셀이 다른 모든 셀의 트리거를 알게 할 수는 있지만, 사이드 이펙트 및 비효율적이어서 이렇게 하지 않음.

Author: Minny27

Projects/Features/Falling/Src/Subviews/Cell/FallingUserCollectionViewCell.swift

@@ -16,8 +16,7 @@ struct FallingUserCollectionViewCellObserver {
   var timerActiveTrigger: Observable<Bool>
 }
 
-final class FallingUserCollectionViewCell: TFBaseCollectionViewCell {
-  
+final class FallingUserCollectionViewCell: UserCardViewCollectionViewCell {
   lazy var profileCarouselView = ProfileCarouselView()
 
   lazy var cardTimeView = CardTimeView()
@@ -36,6 +35,8 @@ final class FallingUserCollectionViewCell: TFBaseCollectionViewCell {
       $0.top.leading.trailing.equalToSuperview().inset(12)
       $0.height.equalTo(32)
     }
+    
+    self.showUserCardDimView()
   }
 
   override func prepareForReuse() {
@@ -52,31 +53,27 @@ final class FallingUserCollectionViewCell: TFBaseCollectionViewCell {
 
     let output = viewModel
       .transform(input: input)
+    
+    output.user
+      .drive(with: self, onNext: { owner, user in
+        owner.profileCarouselView.bind(user)
+      })
+      .disposed(by: disposeBag)
 
     output.timeState
       .drive(self.rx.timeState)
       .disposed(by: self.disposeBag)
 
-    output.isDimViewHidden
-      .drive(with: self, onNext: { owner, isHidden in
-        if isHidden {
-          owner.profileCarouselView.hiddenDimView()
-        } else {
-          owner.profileCarouselView.showDimView()
-        }
+    output.timeStart
+      .drive(with: self, onNext: { owner, _ in
+        owner.hiddenUserCardDimView()
       })
       .disposed(by: disposeBag)
 
     output.timeZero
       .drive(scrollToNextObserver)
       .disposed(by: disposeBag)
 
-    output.user
-      .drive(with: self, onNext: { owner, user in
-        owner.profileCarouselView.bind(user)
-      })
-      .disposed(by: disposeBag)
-
     profileCarouselView.infoButton.rx.tap.asDriver()
       .scan(true) { lastValue, _ in
         return !lastValue

Projects/Features/Falling/Src/Subviews/Cell/FallinguserCollectionViewCellModel.swift

@@ -128,10 +128,10 @@ final class FallinguserCollectionViewCellModel: ViewModelType {
   }
 
   struct Output {
+    let user: Driver<FallingUser>
     let timeState: Driver<TimeState>
+    let timeStart: Driver<Void>
     let timeZero: Driver<Void>
-    let user: Driver<FallingUser>
-    let isDimViewHidden: Driver<Bool>
   }
 
   func transform(input: Input) -> Output {
@@ -162,18 +162,14 @@ final class FallinguserCollectionViewCellModel: ViewModelType {
       }.asDriver(onErrorJustReturn: 8.0)
 
     let timeState = timer.map { TimeState(rawValue: $0) }
+    let timeStart = timer.filter { $0 == 8.0 }.map { _ in }
     let timeZero = timer.filter { $0 == 0 }.map { _ in }
 
-    let isDimViewHidden = Driver.merge(
-      timerActiveTrigger.take(1).asDriverOnErrorJustEmpty(), // take(1)을 해주지 않으면 일시정지 때마다 dimmed 됨
-      timeZero.map { _ in false }
-    )
-
     return Output(
-      timeState: timeState,
-      timeZero: timeZero,
       user: user,
-      isDimViewHidden: isDimViewHidden
+      timeState: timeState,
+      timeStart: timeStart,
+      timeZero: timeZero
     )
   }
 }

Projects/Modules/DesignSystem/Src/BaseView/UserCardViewCollectionViewCell.swift

@@ -0,0 +1,48 @@
+//
+//  UserCardViewCollectionViewCell.swift
+//  DSKit
+//
+//  Created by SeungMin on 1/31/24.
+//
+
+import UIKit
+
+open class UserCardViewCollectionViewCell: TFBaseCollectionViewCell {
+  private let userCardDimView: UIView = {
+    let userCardWidth = (UIWindow.keyWindow?.bounds.width ?? .zero) - 32
+    let view = UIView(
+      frame: CGRect(
+        x: 0,
+        y: 0,
+        width: userCardWidth,
+        height: userCardWidth * 1.64
+      )
+    )
+    view.layer.cornerRadius = 20
+    return view
+  }()
+  
+  public func showUserCardDimView() {
+    DispatchQueue.main.async { [weak self] in
+      guard let self = self else { return }
+      self.addSubviews(userCardDimView)
+      print("DimView added!")
+      UIView.animate(withDuration: 0.0) {
+        self.userCardDimView.backgroundColor = DSKitAsset.Color.DimColor.default.color
+      }
+    }
+  }
+  
+  public func hiddenUserCardDimView() {
+    DispatchQueue.main.async { [weak self] in
+      guard let self = self else { return }
+      UIView.animate(withDuration: 0.0) {
+        self.userCardDimView.backgroundColor = DSKitAsset.Color.clear.color
+      } completion: { [weak self] _ in
+        guard let self = self else { return }
+        print("Removed DimView!")
+        self.userCardDimView.removeFromSuperview()
+      }
+    }
+  }
+}