[feat] 모임 상세 화면 약속 분기 처리

[JinUng41]

🔗 연결된 이슈

• Connected: [feat] 모임 상세 화면 약속 분기 처리 #334

📄 작업 내용

• 모임 상세 화면에서 '내가 속한 약속'과 '모든 약속'을 분기 처리합니다.

구현 내용	IPhone 15 pro
아무 약속도 없는 경우
내가 속한 약속이 없는 경우
둘 다 있는 경우
약속 상세 화면으로 이동

💻 주요 코드 설명

📌 '내가 속한 약속'과 '모든 약속' 서버에 요청하기

• '내가 속한 약속'은 쿼리 파라미터가 필요하지만, '모든 약속'은 쿼리 파라미터가 없어야 합니다.
• 따라서 TargetType의 case는 2가지로 분리하되, Service에서는 옵셔널로 분기 처리를 하였습니다.

MeetingService.swift

// MeetingService 내 MeetingInfoServiceProtocol
func fetchMeetingPromiseList(
    with meetingID: Int,
    isParticipant: Bool?
) async throws -> ResponseBodyDTO<MeetingPromisesModel>? {
    guard let isParticipant else {
        // '모든 약속' 요청
        return try await request(with: .fetchMeetingPromiseList(meetingID: meetingID))
    }
    // '내가 속한 약속' 요청
    return try await request(with: .fetchParticipatedPromiseList(meetingID: meetingID, isParticipant: isParticipant))
}

📌 밑줄을 가진 세그먼트 컨트롤

• 더 디테일한 부분은 밑줄이 각 세그먼트의 길이 만큼 길어지거나 줄어들어야 하는 점입니다.
• 기존 SOPT 과제 티빙 클론 프로젝트에서 구현한 바있어, 이를 가져와 구현하였습니다.
• CALayer로 시도해보고 싶었으나, 도저히 하지 못하고 포기하였습니다.
• XCode가 1.9인 이유를 다시 한번 알게 되었습니다. (시뮬레이터로 동작 시, 잔상이 남는 문제 -> 이를 해결하려고 3시간 넘게 투자했으나, 아... 망할 시뮬레이터..)

UnderlineSegmentedControl.swift

final class UnderlineSegmentedControl: UISegmentedControl {
    private let underlineView = UIView(backgroundColor: .maincolor)
    
    override init(items: [Any]?) {
        super.init(items: items)
        setupUI()
        removeBackgroundAndDivider()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
    }
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let segmentFrames = segmentFrames()
        let labelFrames = segmentLabelFrames()
        
        guard selectedSegmentIndex < labelFrames.count,
              selectedSegmentIndex < segmentFrames.count
        else {
            return
        }
        
        let segmentFrame = segmentFrames[selectedSegmentIndex]
        let labelFrame = labelFrames[selectedSegmentIndex]
        
        UIView.animate(withDuration: 0.1) {
            self.underlineView.frame = CGRect(
                x: segmentFrame.minX + labelFrame.minX,
                y: self.bounds.height - 2.0,
                width: labelFrame.width,
                height: 4.0
            )
        }
    }
}

private extension UnderlineSegmentedControl {
    func setupUI() {
        let attributes = [
            NSAttributedString.Key.foregroundColor: UIColor.gray4,
            .font: UIFont.pretendard(.body06)
        ]
        
        let selectedAttributes = [
            NSAttributedString.Key.foregroundColor: UIColor.gray8,
            .font: UIFont.pretendard(.body05)
        ]
        
        setTitleTextAttributes(attributes as [NSAttributedString.Key : Any], for: .normal)
        setTitleTextAttributes(selectedAttributes as [NSAttributedString.Key : Any], for: .selected)
        apportionsSegmentWidthsByContent = true
        selectedSegmentIndex = 0
        
        addSubviews(underlineView)
    }
    
    func removeBackgroundAndDivider() {
        let image = UIImage()
        setBackgroundImage(image, for: .normal, barMetrics: .default)
        setBackgroundImage(image, for: .selected, barMetrics: .default)
        setBackgroundImage(image, for: .highlighted, barMetrics: .default)
        setDividerImage(image, forLeftSegmentState: .selected, rightSegmentState: .normal, barMetrics: .default)
    }
    
    func segmentLabelFrames() -> [CGRect] {
        subviews
            .sorted { $0.frame.minX < $1.frame.minX }
            .compactMap { $0.subviews.first(where: { $0 is UILabel }) as? UILabel }
            .map { $0.frame }
    }
    
    func segmentFrames() -> [CGRect] {
        let temp = subviews
            .sorted { $0.frame.minX < $1.frame.minX }
            .compactMap { $0 as? UIImageView }
            .map { $0.frame }
        
        var frames = [CGRect]()
        for i in 0..<temp.count {
            if i % 2 == 0 {
                frames.append(temp[i])
            }
        }
        return frames
    }
}

📌 '내가 속한 약속'과 '모든 약속' UI 분기처리

• 약속 리스트를 보여줄 컬렉션 뷰를 단일로 사용합니다.
• 세그먼트 컨트롤(0: '내가 속한 약속', 1: '모든 약속')의 값에 따라 데이터소스를 위한 배열을 결정합니다.

MeetingInfoViewModel.swift

// extension MeetingInfoViewModel: ViewModelType에서
struct Input {
    let viewWillAppear: PublishRelay<Void>
    let createPromiseButtonDidTap: Observable<Void>
    let actionButtonDidTapRelay: PublishRelay<Void>
    let selectedSegmentedIndex: Observable<Int> // 세그먼트 컨트롤의 선택된 인덱스 값
    let promiseCellDidSelect: Observable<Int>
}

// transform 메서드 내에서
let promises = input.selectedSegmentedIndex
    .flatMapLatest { [weak self] index -> Observable<[MeetingInfoPromiseModel]> in
        guard let self else {
            return Observable.just([])
        }
        
        // 삼항 연산자에 따라 데이터소스의 원본 배열을 결정함.
        let source = index == 0 ? self.partipatedPromisesModelRelay : self.meetingPromisesModelRelay
        return source
            .compactMap { $0?.promises }
            .map { self.convertToMeetingInfoPromiseModels(from: $0) }
            .asObservable()
    }
    .asDriver(onErrorJustReturn: [])

📌 셀 선택 시 화면 이동

• 셀이 선택되었을 때에 대응하기 위해서는 일반적으로 CollectionViewDelegate의 didSelectItemAt을 이용합니다.
• 하지만 RxCocoa를 이용하면, 이를 rx 코드로 작성할 수 있습니다.

MeetingInfoViewController.swift

// bindViewModel 메서드에서
let promiseCellDidSelect = rootView.promiseListView.rx.itemSelected
    .map { $0.item }
    .asObservable()

let input = MeetingInfoViewModel.Input(
    viewWillAppear: viewWillAppearRelay,
    createPromiseButtonDidTap: rootView.createPromiseButtonDidTap,
    actionButtonDidTapRelay: actionButtonDidTapRelay,
    selectedSegmentedIndex: rootView.selectedSegmentIndex,
    promiseCellDidSelect: promiseCellDidSelect // 선택된 아이템 (Int형)
)

output.navigateToPromiseInfo
    .drive(with: self) { owner, promiseID in // ViewModel로부터 `promiseID`를 전달받아, 약속 상세 화면으로 이동
        guard let promiseID else { return }
        
        let pagePromiseViewController = PromiseViewController(
            viewModel: PromiseViewModel(promiseID: promiseID, service: PromiseService())
        )
        
        owner.navigationController?.pushViewController(pagePromiseViewController, animated: true)
    }
    .disposed(by: disposeBag)

📚 참고자료

• 밑줄 세그먼트 컨트롤 관련 티빙 클론 과제 PR

👀 기타 더 이야기해볼 점

• PR 열심히 썼어용! 다들 화이팅하세요!!

[mmaybei]

꼼꼼한 pr까지 .. 수고하셨습니다!

[hooni0918]

LGTM

[youz2me]

고생하셨습니다! 1.8의 저주를 이겨내셨으니 더욱 강해지시겠군요.

[youz2me]

굿!

[youz2me]

이거 혹시 한번에 개행 없애는 방법 아시나요?

[JinUng41]

나중에 직접 알려드릴게요~

[youz2me]

고생하셨습니다 ㅎㅎ...