Feat/#354 퀘스트 상단 탭바 구현

[dev-domo]

🔗 연결된 이슈

• Connected: [Feat] 퀘스트 조회 뷰 상단 탭바 구현 #354

📄 작업 내용

• 상단 탭바를 구현했습니다.
• 공통 퀘스트 뷰컨트롤러(CommonQuestViewController)를 만들어놓았고, 공통 퀘스트 뷰 구현 때 수정 예정입니다.

구현 내용	IPhone 16 pro	IPhone 13 mini
GIF

💻 주요 코드 설명

TabItem

• 나중에 추가로 상단 탭바가 생길 것을 대비해서 확장성 있는 설계를 하고 싶었습니다.
• 먼저 TabItem이라는 프로토콜을 만들었습니다.

protocol TabItem: CaseIterable {
    var title: String { get }
    var image: UIImage { get }
    var viewController: UIViewController { get }
}

TabBarItemView

• 탭바에서 탭 하나에 해당하는 뷰입니다.

final class TopTabBarItemView: BaseView {
    // 속성 생략
    init(item: any TabItem) {
        tabImageView.image = item.image
        tabNameLabel.text = item.title
        
        super.init(frame: .zero)
    }
}

TopTabBar

• 상단 탭바에 해당하는 뷰입니다. UIStackView를 상속해서 만들었습니다.

final class TopTabBar: UIStackView {
    
    // TopTabBarItemView 배열
    private let itemViews: [TopTabBarItemView]
    // 탭바를 탭했을 때 인덱스 전달을 위한 클로저
    var didTap: ((Int) -> Void)?
    
    init(items: [any TabItem]) {
        self.itemViews = items.map { TopTabBarItemView(item: $0) }
        super.init(frame: .zero)
        
        // 생략
    }
}

ParentQuestViewController

final class ParentQuestViewController<T: TabItem>: BaseViewController {
    
    private let tabBar: TopTabBar
    private let containerView = UIView()
    private let controllers: [UIViewController]
    private var currentViewController: UIViewController?
    
    init(items: T.AllCases) {
        self.tabBar = TopTabBar(items: Array(items))
        self.controllers = items.map { $0.viewController }
        super.init(nibName: nil, bundle: nil)
    }
}

[juri123123]

LGTM

[juri123123]

wow 확장성 있는 구조 넘 좋네용..

[y-eonee]

대 개 맹

[juri123123]

처음 보는 친구들이라 찾아보니 커스텀 탭바를 사용할 때 사용해줘야하는 친구들이군요 ! 배워갑니당 ~

[juri123123]

여기 변경사항은 as-is랑 to-be가 어떻게 바뀐건가요?

[y-eonee]

정말 고능하신 코드에 놀라고갑니다..

[y-eonee]

대 개 맹