feat: 강제 업데이트 팝업 뷰 UI 구현 (#381)

[hyun99999]

🌴 PR 요약

🌱 작업한 브랜치

• 381

🌱 작업한 내용

• 강제 업데이트 팝업 뷰 구현
• FlexLayout 과 함께 쓰이는 PinLayout 을 사용하여 구현해보았습니다.

  • 간단하게 언급해보자면 FlexLayout 은 UIStackView 을 개선한 것이고, PinLayout 은 auto layout 이 아닌 방법으로 UIView 및 CALayer 를 레이아웃할 수 있습니다. 그래서 UIStackView 처럼 안에 담을 아이템들을 FlexLayout 으로 설정하고 root container 가 되는 뷰를 PinLayout 으로 배치하는 것으로 함께 사용할 수 있습니다.

🚨참고사항

• 레이아웃에 대한 주석을 포함한 코드입니당. 프로젝트에는 코드의 가독성이 떨어진다고 판단해서 주석을 삭제했습니다.
• 아래표시한 파란색 부분이 rootFlexContainer 입니다.

import UIKit

import FlexLayout
import PinLayout

class UpdateViewController: UIViewController {

    // MARK: - Components

    // ...

    // MARK: - View Life Cycle

    override func viewDidLoad() {
        super.viewDidLoad()

        // ...
    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // ✅ PinLayout 으로 flexbox container 의 레이아웃을 지정.
        rootFlexContainer.pin
            .vCenter()  // vertical 중심 정렬
            .hCenter()  // horizontal 중심 정렬
            .height(487).width(327)
/*
        // 너비 대비 비율로 높이를 지정할 수도 있습니다.
        rootFlexContainer.pin.horizontally(24)  // left(24).right(24) 과 동일
            .vCenter()  
            .height(rootFlexContainer.frame.width / 327 * 487) 
*/

        // ✅ Flex 메서드 layout() 을 사용하여 flexbox 의 자식 레이아웃을 지정.
        rootFlexContainer.flex.layout()
    }
}

• rootFlexContainer 안의 아이템들을 UIStackView 처럼 사용한다고 생각하면 됩니당.

// MARK: - Layout

extension UpdateViewController {
    private func setLayout() {
        view.addSubview(rootFlexContainer)

        // ✅ 목표: updateCardImageView 는 위에, updateButton 는 맨 아래에서 시작.
        rootFlexContainer.flex.direction(.column)
            // 첫 번째 아이템은 시작, 마지막 아이템은 끝에 위치하도록 item1, item2 를 감싸고, item3, item4 를 감싸는 아이템 계층 두 개를 추가함.
            .justifyContent(.spaceBetween)
            .define { flex in

            // 1
            flex.addItem().direction(.column).define { flex in
                // 📌 item1
                // ✅ 목표: updateCardImageView 를 중앙정렬.
                flex.addItem().direction(.column).alignItems(.center).define { flex in
                        flex.addItem(updateCardImageView).marginTop(20)
                        // 아이템의 크기를 유지(기본값)
                        // .grow(0)

                        // ✅ 목표: rootFlexContainer 에 대해서 우측상단에 위치.
                        // .absolute 을 사용하여(position(.relative)가 기본값) parent 와 관련하여 절대적으로 위치함.
                        flex.addItem(cancelButton).position(.absolute).top(20).right(20)
                    }
                // 📌 item2
                flex.addItem(updateContentLabel).marginTop(16).marginBottom(18).marginHorizontal(16)
            }

            // 2
            // 🚨 아래의 트러블 슈팅2 를 거쳐서 수정됩니다.
            flex.addItem().direction(.column).define { flex in
                // 📌 item3
                // ✅ 목표: updateButton 을 기준으로 bottom 간격을 가짐. checkBoxButton 와 cehckLabel 이 수평 중앙 정렬.
                flex.addItem().direction(.row).alignItems(.center).marginBottom(20).define { flex in
                    flex.addItem(checkBoxButton).marginLeft(16).size(16)
                    flex.addItem(checkLabel).marginLeft(2)
                }
                // 📌 item4
                flex.addItem(updateButton).marginBottom(16).marginHorizontal(17)
            }
        }
    }
}

FlexLayout 과 PinLayout 에 대한 내용과 UI 를 설계했던 방식, 트러블 슈팅하는 과정을 담은 글도 첨부해드리겠습니당! https://gyuios.tistory.com/278

📸 스크린샷

기능	스크린샷
뷰 계층
13mini / 14 pro max

📮 관련 이슈

• Resolved: #381