[Week2] (#3) 2주차 과제

[mnbvcxzyj]

⚠️ 관련 이슈

• [Week2] 2주차 과제 #3

🚧 작업 내용

• UIScrollView를 이용하여 앱스토어의 토스 상세 페이지 UI를 구현했습니다.
• “버전 기록 보기” 및 “모두 보기” 버튼을 눌렀을 때 각각 버전 기록 페이지와 리뷰 모두 보기 페이지로 이동하도록 구현했습니다.
• “더 보기” 버튼 클릭 시 전체 앱 설명을 표시하는 기능을 구현했습니다.

1) StackView Extension 추가

• UIStackView에 여러 개의 뷰를 한 번에 addArrangedSubviews로 추가할 수 있도록 확장 메서드 추가하였습니다.

extension UIStackView {
    func addArrangedSubviews(_ views: UIView...) {
        views.forEach {
            self.addArrangedSubview($0)
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
    }
}

2) delegate 패턴 구현

• RatingAndReviewViewDelegate, NewNewsViewDelegate 프로토콜을 정의하고, 각 뷰에서 버튼 클릭 시 페이지 이동을 위한 델리게이트 메소드를 작성하였습니다.

protocol RatingAndReviewViewDelegate: AnyObject {
    func seeAllReviewsButtonTapped()
}

protocol NewNewsViewDelegate: AnyObject {
    func versionUpdateRecordButtonTapped()
}

• Delegate 프로토콜을 채택하고 메소드 구현하였습니다.

    func versionUpdateRecordButtonTapped() {
        let versionRecordViewController = VersionRecordViewController()
        navigationController?.pushViewController(versionRecordViewController, animated: true)
    }

    func seeAllReviewsButtonTapped() {
        let allReviewsViewController = AllReviewsViewController()
        navigationController?.pushViewController(allReviewsViewController, animated: true)
    }

    // Delegate 설정
    private func setDelegates() {
        ratingAndReviewView.delegate = self
        newNewsView.delegate = self
    }

3) UIButton Configuration으로 버튼 구현

• UIButton.Configuration을 사용하여 버튼의 아이콘과 텍스트 사이 간격 조정 등 버튼 스타일을 작성하였습니다.

private let reviewWriteButton: UIButton = {
    let button = UIButton()
    var config = UIButton.Configuration.plain()
    config.image = UIImage(systemName: "square.and.pencil")
    config.title = "리뷰 작성"
    config.baseForegroundColor = .systemBlue
    config.imagePadding = 5
    button.configuration = config
    button.titleLabel?.font = .systemFont(ofSize: 16, weight: .bold)
    
    return button
}()

🙏🏻 To Reviewer

🤔 stackView

여기 부분을 구현할 때,

1. 전체를 infoStackView 로 생각하고
2. 그 안에 rateStackView, awardStackView, ageStackView와 얇은 구분선들을 추가해서
3. 각 스택뷰가 동등한 너비로 쫘르륵 나열되는 꿈을 꾸면서..

.fillEqually 값을 주었는데 구분선까지 함께 넓어지면서 제가 생각하는대로 구현되지 않았습니다 .. ^_^ .. ;;

그래서 .fillProportionally 와 $0.width.equalTo(infoStackView.snp.width).multipliedBy(1.0 / 3.0) 를 작성하여 각 하위 stackView에 3등분으로 너비 값을 지정해주면 그나마 제가 원하는 느낌으로 뷰가 배치되었는데 더 좋은 방법이 있는지 궁금합니다.

// AppInfoSummaryView 파일 

private let infoStackView: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.distribution = .fillProportionally 
//     stackView.distribution = .fillEqually (????) 

이외에도 많은 피드백 부탁드립니다.. 감사합니다 ^ __ ^ ..

📸 시연 영상