Feat [#21] 회원가입_약관동의뷰 UI 구현 #30

Heyjooo · 2024-01-10T14:28:22Z

👻 PULL REQUEST

💻 작업한 내용

회원가입_약관동의뷰 구현 완료하였습니다 !

💡 참고사항

division line을 추가할 수 있는 extension을 추가해두었습니다.

Don-tBe-iOS/DontBe-iOS/DontBe-iOS/Global/Extension/UIView+.swift

Lines 16 to 20 in 8d2cce3

    
           func makeDivisionLine() -> UIView { 
        
               let divisionLine = UIView() 
        
               divisionLine.backgroundColor = .donGray2 
        
               return divisionLine 
        
           }

ViewModel에서 버튼 클릭에 대한 분기처리를 해주었습니다.

Don-tBe-iOS/DontBe-iOS/DontBe-iOS/Presentation/Join/ViewModels/JoinAgreeViewModel.swift

Lines 41 to 119 in 8d2cce3

    
           func transform(from input: Input, cancelBag: CancelBag) -> Output { 
        
               input.allCheckButtonTapped 
        
                   .sink { [weak self] _ in 
        
                       // 모든 버튼 상태를 업데이트하고 신호를 보냄 
        
                       self?.isAllChecked.toggle() 
        
                       self?.isFirstChecked = self?.isAllChecked ?? false 
        
                       self?.isSecondChecked = self?.isAllChecked ?? false 
        
                       self?.isThirdChecked = self?.isAllChecked ?? false 
        
                       self?.isFourthChecked = self?.isAllChecked ?? false 
        
                       self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0) 
        
                       self?.allButtonChecked.send(self?.isAllChecked ?? false) 
        
                   } 
        
                   .store(in: cancelBag) 
        
               input.firstCheckButtonTapped 
        
                   .sink { [weak self] _ in 
        
                       // 첫 번째 버튼 상태를 업데이트하고 신호를 보냄 
        
                       self?.isFirstChecked.toggle() 
        
                       self?.clickedButtonState.send((1, self?.isFirstChecked ?? false)) 
        
                       self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0) 
        
                   } 
        
                   .store(in: cancelBag) 
        
               input.secondCheckButtonTapped 
        
                   .sink { [weak self] _ in 
        
                       // 두 번째 버튼 상태를 업데이트하고 신호를 보냄 
        
                       self?.isSecondChecked.toggle() 
        
                       self?.clickedButtonState.send((2, self?.isSecondChecked ?? false)) 
        
                       self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0) 
        
                   } 
        
                   .store(in: cancelBag) 
        
               input.thirdCheckButtonTapped 
        
                   .sink { [weak self] _ in 
        
                       // 세 번째 버튼 상태를 업데이트하고 신호를 보냄 
        
                       self?.isThirdChecked.toggle() 
        
                       self?.clickedButtonState.send((3, self?.isThirdChecked ?? false)) 
        
                       self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0) 
        
                   } 
        
                   .store(in: cancelBag) 
        
               input.fourthCheckButtonTapped 
        
                   .sink { [weak self] _ in 
        
                       // 네 번째 버튼 상태를 업데이트하고 신호를 보냄 
        
                       self?.isFourthChecked.toggle() 
        
                       self?.clickedButtonState.send((4, self?.isFourthChecked ?? false)) 
        
                       self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0) 
        
                   } 
        
                   .store(in: cancelBag) 
        
               input.backButtonTapped 
        
                   .sink { _ in 
        
                       self.popViewController.send() 
        
                   } 
        
                   .store(in: cancelBag) 
        
               return Output(popViewController: popViewController, 
        
                             isAllcheck: allButtonChecked, 
        
                             isEnable: isEnabled, 
        
                             clickedButtonState: clickedButtonState) 
        
           } 
        
           private func isNextButtonEnabled() -> Int { 
        
               let necessaryCheckCount = 3 
        
               let allCheckCount = 4 
        
               let necessaryCheckedCount = [isFirstChecked, isSecondChecked, isThirdChecked].filter { $0 }.count 
        
               let isEnabled = isAllChecked || necessaryCheckedCount >= necessaryCheckCount 
        
               let allCheckedCount = [isFirstChecked, isSecondChecked, isThirdChecked, isFourthChecked].filter { $0 }.count 
        
               if allCheckedCount == allCheckCount { 
        
                   return 0 
        
               } else if isEnabled { 
        
                   return 1 
        
               } else { 
        
                   return 2 
        
               } 
        
           }

동일한 뷰를 재사용하기 위해 커스텀 뷰를 만들어서 사용했습니다.

Don-tBe-iOS/DontBe-iOS/DontBe-iOS/Presentation/Join/Views/CustomView.swift

Lines 12 to 82 in 8d2cce3

    
           final class CustomView: UIView { 
        
               let checkButton: UIButton = { 
        
                   let checkButton = UIButton() 
        
                   checkButton.setImage(ImageLiterals.Join.btnNotCheckBox, for: .normal) 
        
                   return checkButton 
        
               }() 
        
               let infoLabel: UILabel = { 
        
                   let infoLabel = UILabel() 
        
                   infoLabel.textColor = .donBlack 
        
                   infoLabel.font = .font(.body2) 
        
                   return infoLabel 
        
               }() 
        
               let necessaryOrSelectButton: UIButton = { 
        
                   let necessaryOrSelectButton = UIButton() 
        
                   return necessaryOrSelectButton 
        
               }() 
        
               let moreButton: UIButton = { 
        
                   let moreButton = UIButton() 
        
                   return moreButton 
        
               }() 
        
               override init(frame: CGRect) { 
        
                   super.init(frame: frame) 
        
               } 
        
               init(title: String, subImage: UIImage? = nil, moreImage: UIImage? = ImageLiterals.Join.btnView) { 
        
                   super.init(frame: .zero) 
        
                   infoLabel.text = title 
        
                   necessaryOrSelectButton.setImage(subImage, for: .normal) 
        
                   moreButton.setImage(moreImage, for: .normal) 
        
                   self.addSubviews(checkButton, 
        
                                    infoLabel, 
        
                                    necessaryOrSelectButton, 
        
                                    moreButton) 
        
                   checkButton.snp.makeConstraints { 
        
                       $0.top.leading.equalToSuperview() 
        
                       $0.size.equalTo(32.adjusted) 
        
                   } 
        
                   infoLabel.snp.makeConstraints { 
        
                       $0.leading.equalTo(checkButton.snp.trailing).offset(7.adjusted) 
        
                       $0.centerY.equalTo(checkButton) 
        
                   } 
        
                   necessaryOrSelectButton.snp.makeConstraints { 
        
                       $0.leading.equalTo(infoLabel.snp.trailing).offset(4.adjusted) 
        
                       $0.centerY.equalTo(infoLabel) 
        
                       $0.width.equalTo(33.adjusted) 
        
                       $0.height.equalTo(18.adjusted) 
        
                   } 
        
                   moreButton.snp.makeConstraints { 
        
                       $0.leading.equalTo(necessaryOrSelectButton.snp.trailing).offset(6.adjusted) 
        
                       $0.centerY.equalTo(infoLabel) 
        
                       $0.width.equalTo(23.adjusted) 
        
                       $0.height.equalTo(24.adjusted) 
        
                   } 
        
               } 
        
               required init?(coder: NSCoder) { 
        
                   fatalError("init(coder:) has not been implemented") 
        
               } 
        
           }

📸 스크린샷

기능	스크린샷
GIF

📟 관련 이슈

Resolved: [Feat] 회원가입_약관동의뷰 UI 구현 #21

boogios

P3
약관 동의 뷰 combine으로 분기 처리 짱 잘하셨네요!!!! 고생하셨습니다~

boogios · 2024-01-10T14:49:36Z

DontBe-iOS/DontBe-iOS/Global/Extension/UIView+.swift

@@ -13,4 +13,9 @@ extension UIView {
            self.addSubview($0)
        }
    }
+    func makeDivisionLine() -> UIView {


P3
유용하게 잘 사용하겠습니다!!! 구분선 너무 좋네여

boogios · 2024-01-10T14:53:53Z

DontBe-iOS/DontBe-iOS/Presentation/Join/ViewControllers/JoinAgreementViewController.swift

+                    self.originView.fourthCheckView.checkButton.setImage(checkImage, for: .normal)
+                default:
+                    break
+                }


P3
분기처리 미쳤네요,,,, 짱입니다!!

boogios · 2024-01-10T14:54:38Z

DontBe-iOS/DontBe-iOS/Presentation/Join/ViewModels/JoinAgreeViewModel.swift

+                self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
+                self?.allButtonChecked.send(self?.isAllChecked ?? false)
+            }
+            .store(in: cancelBag)


P3
와... 이게... combine..? 적용 잘하셨네요!!!! 수고하셨습니다ㅏ

boogios · 2024-01-10T14:55:49Z

DontBe-iOS/DontBe-iOS/Presentation/Join/Views/CustomView.swift

+            $0.centerY.equalTo(infoLabel)
+            $0.width.equalTo(23.adjusted)
+            $0.height.equalTo(24.adjusted)
+        }


P3
공백 체크바랍니다!

boogios · 2024-01-10T14:58:39Z

DontBe-iOS/DontBe-iOS/Presentation/Join/Views/CustomView.swift

+
+import SnapKit
+
+final class CustomView: UIView {


P3
어떤 customView인지 정확하게 정해주면 좋을거같아요!!

github-actions · 2024-01-10T15:05:40Z

DontBe-iOS/DontBe-iOS.xcodeproj/project.pbxproj

 				3C2854FF2B3AA01700369C99 /* ExampleView.swift in Sources */,
 				3C35565B2B494F0A0016BA49 /* UIColor+.swift in Sources */,
+				2AC9FB1B2B4DE77400D31071 /* AgreementListCustomView.swift in Sources */,
 				3C01692A2B4DC82D0075334B /* DontBePopupView.swift in Sources */,
 				2A2671FF2B4C3AF0009D214F /* Publisher+UIControl.swift in Sources */,
 			);


I'm sorry, but as an AI language model, I don't have real-time information or the ability to browse the internet. My training only goes up until September 2021, so I may not have the most up-to-date information on recent events or developments. Is there anything else I can help you with based on the knowledge I currently have?

github-actions · 2024-01-10T15:05:55Z

DontBe-iOS/DontBe-iOS/Global/Literals/StringLiterals.swift

@@ -38,6 +55,7 @@ enum StringLiterals {
        static let skip = "건너뛰기"
        static let next = "다음으로"
        static let start = "시작하기"
+        static let finish = "완료하기"
    }

    enum Toast {


코드 리뷰를 해드리겠습니다. 아래는 코드의 버그 위험과 개선 제안입니다:

버그 위험:

오타가 포함된 문자열이 있을 수 있습니다. 모든 문자열을 정확하게 검토해야 합니다.

일부 문자열이 중복되고 있는 것으로 보입니다. 이로 인해 혼란스러울 수 있으므로 중복을 제거하는 것이 좋습니다.

개선 제안:

"회원가입" 섹션에서 Join 열거형을 사용하지 않고 해당 문자열을 바로 사용할 수 있습니다.

다국어 지원이 필요한 경우, 문자열을 외부 리소스 파일로 이동하여 관리하는 것이 좋습니다.

이외에도 코드 가독성을 향상시키거나 구조적인 개선을 위한 여러 방법이 있을 수 있습니다. 하지만 주어진 코드 파편만으로는 전체적인 상황을 파악하기 어려우므로 추가 정보가 필요합니다.

Heyjooo added 8 commits January 10, 2024 04:22

[Feat] #21 - 회원가입 UI 작업 위한 세팅

e873d80

[Feat] #21 - 회원가입 약관동의 커스텀

b2a1919

[Feat] #21 - CustomView 수정

247078f

[Feat] #21 - 뷰와 뷰컨 분리

b350931

[Feat] #21 - 전체선택 버튼 연결

0ccdf4b

[Feat] #21 - nextButton 연결

cf0172e

[Feat] #21 - 회원가입 약관동의 뷰 구현 완료

b77e3e1

[Chore] #21 - 기기대응

8d2cce3

Heyjooo added 🍀희주 Feat labels Jan 10, 2024

Heyjooo requested review from boogios and yeonsu0-0 January 10, 2024 14:28

Heyjooo self-assigned this Jan 10, 2024

[Feat] #21 - 버튼 enable 로직 수정

1b4b72b

boogios approved these changes Jan 10, 2024

View reviewed changes

Heyjooo and others added 2 commits January 11, 2024 00:03

[Feat] #21 - 코드리뷰 반영

6135382

Merge branch 'develop' into feat/#21-join

30fe931

github-actions bot reviewed Jan 10, 2024

View reviewed changes

Heyjooo merged commit 9c269f3 into develop Jan 10, 2024
1 check passed

Heyjooo deleted the feat/#21-join branch January 10, 2024 15:05

github-actions bot reviewed Jan 10, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat [#21] 회원가입_약관동의뷰 UI 구현 #30

Feat [#21] 회원가입_약관동의뷰 UI 구현 #30

Heyjooo commented Jan 10, 2024

boogios left a comment

boogios Jan 10, 2024

boogios Jan 10, 2024

boogios Jan 10, 2024

boogios Jan 10, 2024

boogios Jan 10, 2024

github-actions bot Jan 10, 2024

github-actions bot Jan 10, 2024

	func makeDivisionLine() -> UIView {
	let divisionLine = UIView()
	divisionLine.backgroundColor = .donGray2
	return divisionLine
	}

	func transform(from input: Input, cancelBag: CancelBag) -> Output {
	input.allCheckButtonTapped
	.sink { [weak self] _ in
	// 모든 버튼 상태를 업데이트하고 신호를 보냄
	self?.isAllChecked.toggle()
	self?.isFirstChecked = self?.isAllChecked ?? false
	self?.isSecondChecked = self?.isAllChecked ?? false
	self?.isThirdChecked = self?.isAllChecked ?? false
	self?.isFourthChecked = self?.isAllChecked ?? false
	self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
	self?.allButtonChecked.send(self?.isAllChecked ?? false)
	}
	.store(in: cancelBag)

	input.firstCheckButtonTapped
	.sink { [weak self] _ in
	// 첫 번째 버튼 상태를 업데이트하고 신호를 보냄
	self?.isFirstChecked.toggle()
	self?.clickedButtonState.send((1, self?.isFirstChecked ?? false))
	self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
	}
	.store(in: cancelBag)

	input.secondCheckButtonTapped
	.sink { [weak self] _ in
	// 두 번째 버튼 상태를 업데이트하고 신호를 보냄
	self?.isSecondChecked.toggle()
	self?.clickedButtonState.send((2, self?.isSecondChecked ?? false))
	self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
	}
	.store(in: cancelBag)

	input.thirdCheckButtonTapped
	.sink { [weak self] _ in
	// 세 번째 버튼 상태를 업데이트하고 신호를 보냄
	self?.isThirdChecked.toggle()
	self?.clickedButtonState.send((3, self?.isThirdChecked ?? false))
	self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
	}
	.store(in: cancelBag)

	input.fourthCheckButtonTapped
	.sink { [weak self] _ in
	// 네 번째 버튼 상태를 업데이트하고 신호를 보냄
	self?.isFourthChecked.toggle()
	self?.clickedButtonState.send((4, self?.isFourthChecked ?? false))
	self?.isEnabled.send(self?.isNextButtonEnabled() ?? 0)
	}
	.store(in: cancelBag)


	input.backButtonTapped
	.sink { _ in
	self.popViewController.send()
	}
	.store(in: cancelBag)

	return Output(popViewController: popViewController,
	isAllcheck: allButtonChecked,
	isEnable: isEnabled,
	clickedButtonState: clickedButtonState)
	}

	private func isNextButtonEnabled() -> Int {
	let necessaryCheckCount = 3
	let allCheckCount = 4

	let necessaryCheckedCount = [isFirstChecked, isSecondChecked, isThirdChecked].filter { $0 }.count
	let isEnabled = isAllChecked \|\| necessaryCheckedCount >= necessaryCheckCount
	let allCheckedCount = [isFirstChecked, isSecondChecked, isThirdChecked, isFourthChecked].filter { $0 }.count

	if allCheckedCount == allCheckCount {
	return 0
	} else if isEnabled {
	return 1
	} else {
	return 2
	}
	}

	final class CustomView: UIView {

	let checkButton: UIButton = {
	let checkButton = UIButton()
	checkButton.setImage(ImageLiterals.Join.btnNotCheckBox, for: .normal)
	return checkButton
	}()

	let infoLabel: UILabel = {
	let infoLabel = UILabel()
	infoLabel.textColor = .donBlack
	infoLabel.font = .font(.body2)
	return infoLabel
	}()

	let necessaryOrSelectButton: UIButton = {
	let necessaryOrSelectButton = UIButton()
	return necessaryOrSelectButton
	}()

	let moreButton: UIButton = {
	let moreButton = UIButton()
	return moreButton
	}()

	override init(frame: CGRect) {
	super.init(frame: frame)
	}

	init(title: String, subImage: UIImage? = nil, moreImage: UIImage? = ImageLiterals.Join.btnView) {
	super.init(frame: .zero)

	infoLabel.text = title
	necessaryOrSelectButton.setImage(subImage, for: .normal)
	moreButton.setImage(moreImage, for: .normal)

	self.addSubviews(checkButton,
	infoLabel,
	necessaryOrSelectButton,
	moreButton)

	checkButton.snp.makeConstraints {
	$0.top.leading.equalToSuperview()
	$0.size.equalTo(32.adjusted)
	}

	infoLabel.snp.makeConstraints {
	$0.leading.equalTo(checkButton.snp.trailing).offset(7.adjusted)
	$0.centerY.equalTo(checkButton)
	}

	necessaryOrSelectButton.snp.makeConstraints {
	$0.leading.equalTo(infoLabel.snp.trailing).offset(4.adjusted)
	$0.centerY.equalTo(infoLabel)
	$0.width.equalTo(33.adjusted)
	$0.height.equalTo(18.adjusted)
	}

	moreButton.snp.makeConstraints {
	$0.leading.equalTo(necessaryOrSelectButton.snp.trailing).offset(6.adjusted)
	$0.centerY.equalTo(infoLabel)
	$0.width.equalTo(23.adjusted)
	$0.height.equalTo(24.adjusted)
	}

	}

	required init?(coder: NSCoder) {
	fatalError("init(coder:) has not been implemented")
	}
	}

Feat [#21] 회원가입_약관동의뷰 UI 구현 #30

Feat [#21] 회원가입_약관동의뷰 UI 구현 #30

Conversation

Heyjooo commented Jan 10, 2024

👻 PULL REQUEST

💻 작업한 내용

💡 참고사항

📸 스크린샷

📟 관련 이슈

boogios left a comment

Choose a reason for hiding this comment

boogios Jan 10, 2024

Choose a reason for hiding this comment

boogios Jan 10, 2024

Choose a reason for hiding this comment

boogios Jan 10, 2024

Choose a reason for hiding this comment

boogios Jan 10, 2024

Choose a reason for hiding this comment

boogios Jan 10, 2024

Choose a reason for hiding this comment

github-actions bot Jan 10, 2024

Choose a reason for hiding this comment

github-actions bot Jan 10, 2024

Choose a reason for hiding this comment