[Refactor] Onboarding 화면 PinLayout 리팩토링

[ChoiysApple]

Describe

• Snapkit으로 개발되어 있는 레이아웃을, PinLayout + FlexLayout으로 리팩토링
• 이후 개발되는 화면은 모두 PinLayout + FlexLayout으로 개발

Existing

    // TODO: [OMLK-17] PinLayout + FlexLayout으로 리팩토링
    func configureConstraints(for view: UIView) {
        
        carouselCollectionView.snp.makeConstraints { make in
            make.top.equalTo(view.safeAreaLayoutGuide.snp.top).offset(85)
            make.leading.trailing.equalToSuperview()
        }
        
        pageControl.snp.makeConstraints { make in
            make.top.lessThanOrEqualTo(carouselCollectionView.snp.bottom).offset(40)
            make.centerX.equalToSuperview()
            make.bottom.equalTo(bottomButton.snp.top).offset(-56)
        }
        
        bottomButton.snp.makeConstraints { make in
            make.leading.trailing.equalToSuperview().inset(16)
            make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottom).inset(12)
            make.height.equalTo(55)
        }
    }

    // TODO: [OMLK-17] PinLayout + FlexLayout으로 리팩토링
    private func setUpLayout() {
        
        self.addSubview(imageView)
        imageView.snp.makeConstraints { make in
            make.top.equalToSuperview()
            make.leading.trailing.equalToSuperview().inset(24)
            make.height.lessThanOrEqualTo(333)
        }
        
        let labelStack = UIStackView().then { stackView in
            stackView.axis = .vertical
            stackView.alignment = .center
            stackView.spacing = 8
        }
        
        self.addSubview(labelStack)
        labelStack.snp.makeConstraints { make in
            make.top.equalTo(imageView.snp.bottom).offset(46)
            make.leading.trailing.equalToSuperview()
            make.bottom.lessThanOrEqualToSuperview()
        }
        
        [titleLabel, descriptionLabel].forEach { label in
            labelStack.addArrangedSubview(label)
        }
    }

Benefits

• 코드 성능 향상

Reference

• PinLayout

• PinLayout 사용해보기 - ZeddiOS - 티스토리

• FlexLayout

• FlexLayout 사용해보기 - ZeddiOS - 티스토리

Related

• [Feature] [OMLK-17] 온보딩 화면 UI 개발 #50

[ChoiysApple]

개발 일정이 충분하지 않아, 1차 출시 이후 리팩토링 예정