Feat [#9] 커스텀 버튼 구현

[kim-seonwoo]

👾 작업 내용

• 온보딩 뷰에서 하단 버튼으로 이용되는 OnboardingButton을 구현하였습니다.
• 챌린지 생성과 설문조사 단계에서 선택 버튼으로 이용되는 HMHSelectButton을 구현하였습니다.

OnboardingButton

• Onboarding뷰에서 특정 선택값 유무에 따라 버튼이 활성화되고 비활성화 됩니다.
• 이에 따라 두 가지 타입으로 분류하고, 버튼 배경색과 버튼 활성화 처리를 하였습니다.

    enum OnboardingButtonType {
        case enable
        case disabled
    }

    private func configureButton() {
        self.do {
            $0.makeCornerRound(radius: 6.adjustedHeight)
            $0.layer.cornerCurve = .continuous
        }
        switch type {
        case .enable:
            self.do {
                $0.isEnabled = true
                $0.backgroundColor = .bluePurpleButton
            }
        case .disabled:
            self.do {
                $0.isEnabled = false
                $0.backgroundColor = .gray5
            }
        }
    }

• 다음과 같은 형태로 버튼을 불러와 사용할 수 있습니다.

 lazy var nextButton = OnboardingButton(buttonStatus: .enable, buttonText: "다음")

HMHSelectButton

• 설문조사와 챌린지 생성 보기 선택 버튼으로 활용되는 커스텀 버튼 입니다.
• 활성화된 버튼과 비활성화 버튼을 분기하는 타입을 지정하였습니다.
• 다중 선택이 가능한지 여부에 따른 타입을 지정하였습니다.

    @frozen
    enum HMHSelectButtonType {
        case enable
        case disabled
    }
    
    @frozen
    enum CheckType {
        case solitary
        case multiple
    }

• 다중 선택인지 단일 선택인지에 따라 isChecked: Bool 변수에 따른 처리와 스타일 변화 처리를 해주었습니다.

 private func updateStyle() {
        if isChecked {
            backgroundColor = .bluePurpleActive
            makeBorder(width: 1.5, color: .bluePurpleLine)
        } else {
            backgroundColor = UIColor.gray6
            layer.borderColor = UIColor.clear.cgColor
        }
    }
    
    private func setChecked(_ checked: Bool) {
        isChecked = checked
        updateStyle()
    }
    
    @objc private func onboardingButtonTapped() {
        switch checkType {
        case .solitary:
            guard !isChecked else { return }
            
            superview?.subviews.forEach { subview in
                if let button = subview as? HMHSelectButton, button != self {
                    button.setChecked(false)
                }
            }
            
            setChecked(true)
            
        case .multiple:
            setChecked(!isChecked)
        }
    }

• 다음과 같은 형태로 불러와 사용할 수 있습니다.

let button1 = HMHSelectButton(buttonType: .enable, checkType: .solitary, buttonText: "중독이 너무 심해요")

🚀 PR Point

• 더 효율적인 방법이 있다면 알려주시길 바랍니다.
• 네이밍이 적절한지 검토 부탁드립니다.

📸 스크린샷

구현 내용	스크린샷
커스텀 버튼 사용 예시

✅ Issue

Resolved #9

[Zoe0929]

P4. 고생하셨습니다 ◡̈ 👍

[Zoe0929]

P5. 여기서는 굳이 이렇게 do를 사용할 필요없이 self.makeCornerRound 이런 식으로 작성해도 괜찮을 것 같은데 어떻게 생각하시나요?!

[Zoe0929]

P4. 또한 이런 경우에는 @frozen enum 으로 만드는 것보다는 enum으로 만든 뒤, default case를 사용하는 건 어떤가요?
default case를 이용해서 switch문 하나로 모두 처리할 수 있을 것 같습니다.

[kim-seonwoo]

말씀해주신 리뷰대로 두 개의 switch 문을 하나의 switch문으로 변경하였습니다!
하지만 역시 @Frozen enum으로 사용할 수 있어보이는데 default case로 분기하는 것이 어떤 것을 의미하나요?

[Zoe0929]

P4. 여기도 위와 마찬가지로 @frozen을 제거하고 switch문으로 바꾸는 건 어떠신가요 ?!

[jumining]

LGTM

[boyeon0119]

p5. 오,, 너무 고생하셨어요!!

[Zoe0929]

P5. 적극적인 반영 감사합니다요 ~ 🤝

[Zoe0929]

P5. 여기도 위랑 똑같이 self.isEnabled = true 이런 식으로 작성 가능 할 것 같아요!

[Zoe0929]

P5. 소소하지만 .. case naming 혹시 enabled는 어떠신가요? disabled와 맞추는 게 좋아보여서요!