[Feat] #279 - 디자인 시스템 GBStackView구현

[jeongdung-eo]

🌁 Background

• 기존의 custom stack 뷰의 로직을 개선하기 위해서 리팩토링을 진행했습니다!

📱 Screenshot

👩‍💻 Contents

• 기존 스택뷰는 미리 세 개의 이미지 뷰를 생성하고, 필요에 따라 이미지를 설정하거나 숨김 처리를 했는데, 새롭게 구현한 스택뷰는 전달된 인증 마크를 기반으로 필요한 이미지 뷰만 동적으로 생성하여 추가했습니다.

✅ Testing

📝 Review Note

• 코드리뷰를 반영해서 생성자 파라미터는 변경했습니다!
• 기존에 작성된 로직에서는 데이터를 받아 인증 마크를 추가하는 과정에서 이미지 생성과 스택 뷰에 추가하는 작업을 하나의 메서드에서 처리했습니다. 그러나 역할에 따라 메서드를 분리하여 코드를 보다 직관적으로 재구성했습니다!!!
• 인증 마크를 추가하는 역할

private func addCertifiedImageViews(type: GBStackType, certifications: [Bool]) {
        certifications.enumerated()
            .filter { $0.element }
            .map { $0.offset }
            .forEach { index in
                let imageView = createCertificationImageView(type: type, index: index)
                addImageViewToStack(imageView: imageView, size: type.size)
            }
    }

• 이미지 뷰를 생성하는 역할

private func createCertificationImageView(type: GBStackType, index: Int) -> UIImageView {
        let imageView = UIImageView(image: type.images[index])
        imageView.contentMode = .topLeft
        return imageView
    }

• 이미지 뷰를 스택에 추가하는 역할

private func addImageViewToStack(imageView: UIImageView, size: Int) {
        addArrangedSubview(imageView)
        imageView.snp.makeConstraints {
            $0.size.equalTo(size)
        }
    }

📣 Related Issue

• close [Feat] 디자인 시스템 GBStackView구현  #279

📬 Reference

[seongmin221]

p2;
음 .. 일단 클래스 내용 자체는 잘 돌아갈 것 같은데
입력값 네이밍이 적절하지 않다고 생각합니닷

클래스 선언할 때 data: [false, true, false] 이런 식이라면 거짓, 참, 거짓 이라는 데이터가 들어가는걸로 이해가 돼서요..!!

아마 서버에서 데이터 내려줄 때 bool 타입 배열로 내려줘서 이렇게 한 것 같은데,
차라리 bool 타입 입력값을 hasHaccpMark, hasVeganMark, hasGMOMark 이렇게 3가지 입력값을 따로따로 받고
init 에서 아래처럼 하면 어떨까요 ??

init() {
  super.init(frame: .zero)
  setUI()
  if hasHaccpMark { addMark(.haccp) }
  if hasVeganMark { addMark(.vegan) }
  if hasGMOMark { addMark(.gmo) }
}

요런 느낌쓰..??

제안일 뿐입니다..! 다른 방법 생각나는거 있으면 그걸로 해주셔요 !!

[seongmin221]

var images: [UIImage] {
    switch self {
    case .big: return [.haccpMark28px, .veganMark28px, .gmoMark28px]
    case .small: return [.haccpMark22px, .veganMark22px, .gmoMark22px]
    }
}

이 부분 대신

 // GBStackType.swift
var haccpMark: UIImage {
  switch self {
    case .big: return .haccpMark28px
    case .small: return .haccpMark22px
  }
}

var veganMark: UIImage {
    switch self {
    case .big: return .veganMark28px
    case .small: return .veganMark22px
    }
}

// ...

// GBStackView.swift

// ...

init(type: GBStackType, isHaccp: Bool, isVegan: Bool, isNonGMO: Bool) {
  // ...
  if isHaccp { addHaccpMark() }
  if isVegan { addVeganMark() }
  if isNonGMO { addNonGMOMark() }
}

// ...

[jeongdung-eo]

네! 매개변수명 코리 반영했습니다!

[seongmin221]

확인확인 ~~