필터 세그먼트

[zzangzzangguy]

1. 사용자가 선택한 레어리티에 따라 즐겨찾기 목록을 필터링하여 표시하는 기능
2. 필터링 옵션으로 "All", "Common", "Uncommon", "Rare" 등을 제공하고, 선택한 옵션에 맞는 포켓몬 카드만 표시
3. ReactorKit의 Action과 State를 활용하여 필터링 상태 관리

---

1. 필터링 액션 및 상태 관리

enum Action {
   case filterFavorites(String)
}

enum Mutation {
   case setSelectedRarity(String)
   case setFilteredFavorites([RealmPokemonCard])
   case reloadTableView
}

func mutate(action: Action) -> Observable<Mutation> {
   switch action {
   case .filterFavorites(let rarity):
       let filteredCards = rarity == "All" ? currentState.favoriteCards : currentState.favoriteCards.filter { card in
           let cardRarity = card.toPokemonCard().rarity ?? ""
           return FilterHelper.filterRarities(rarity).contains(cardRarity)
       }
       return Observable.concat([
           Observable.just(Mutation.setSelectedRarity(rarity)),
           Observable.just(Mutation.setFilteredFavorites(filteredCards)),
           Observable.just(Mutation.reloadTableView)
       ])
   }
}

func reduce(state: State, mutation: Mutation) -> State {
   var newState = state
   switch mutation {
   case .setSelectedRarity(let rarity):
       newState.selectedRarity = rarity
   case .setFilteredFavorites(let filteredFavorites):
       newState.filteredFavorites = filteredFavorites
   case .reloadTableView:
       break
   }
   return newState
}

1. FavoriteReactor에서 filterFavorites 액션을 정의

2. mutate 함수에서 filterFavorites 액션을 처리하여 선택된 레어리티에 따라 즐겨찾기 카드를 필터링하고, 필터링된 결과와 선택된 레어리티를 상태에 저장

3. reduce 함수에서 setSelectedRarity와 setFilteredFavorites 뮤테이션을 처리하여 상태를 업데이트

4. reloadTableView 뮤테이션을 방출하여 테이블 뷰 리로드를 트리거

5. 필터링 옵션 선택 및 결과 표시

let filterControl = UISegmentedControl(items: ["All", "Common", "Uncommon", "Rare"]).then {
    $0.selectedSegmentIndex = 0
}

func bind(reactor: FavoriteReactor) {
    filterControl.rx.selectedSegmentIndex
        .map { index -> String in
            let rarity = self.filterControl.titleForSegment(at: index) ?? ""
            return rarity
        }
        .distinctUntilChanged()
        .map(Reactor.Action.filterFavorites)
        .bind(to: reactor.action)
        .disposed(by: disposeBag)

    reactor.state
        .map { state -> [PokemonCard] in
            let selectedRarity = state.selectedRarity
            return state.favoriteCards
                .filter { selectedRarity == "All" || $0.rarity == selectedRarity }
                .map { $0.toPokemonCard() }
        }
        .distinctUntilChanged()
        .bind(to: tableView.rx.items(cellIdentifier: PokemonCardTableViewCell.reuseIdentifier, cellType: PokemonCardTableViewCell.self)) { index, card, cell in
            cell.configure(with: card, isFavorite: true)
        }
        .disposed(by: disposeBag)
}

• UISegmentedControl을 사용하여 필터링 옵션을 제공
• filterControl의 선택 변경 이벤트를 감지하여 filterFavorites 액션을 전달
• Reactor의 상태 변화 중 favoriteCards와 selectedRarity를 사용하여 필터링된 결과를 테이블 뷰에 바인딩

흐름

1. 사용자가 필터링 옵션을 선택하면 FavoriteViewController에서 선택된 레어리티 정보를 filterFavorites 액션을 통해 Reactor로 전
2. FavoriteReactor에서 filterFavorites 액션을 처리하고, 선택된 레어리티에 따라 즐겨찾기 목록을 필터
3. 필터링된 즐겨찾기 목록을 State의 filteredFavorites에 저장하고, 선택된 레어리티를 selectedRarity에 저장
4. reloadTableView 뮤테이션을 방출하여 UI 업데이트를 트리거함
5. FavoriteViewController에서 Reactor의 State 변경을 감지하고, favoriteCards와 selectedRarity를 사용하여 필터링된 결과를 테이블 뷰에 바인딩하여 표시

---

ReactorKit을 활용한 상태 관리 및 액션 처리
RxSwift의 연산자를 사용하여 이벤트 스트림 제어 및 데이터 바인딩
UISegmentedControl을 사용한 필터링 옵션 선택 UI 구현