[Feat] #32 - SignUpView alert 로직 변경 및 SignUpVC UI 구현 #33

lsj8706 · 2022-12-05T11:35:19Z

🌴 PR 요약

🌱 작업한 브랜치

feature/[Feat] 회원가입 뷰 alert 분기 처리 및 가입 완료 뷰 구현 #32-SignUpView-alert-and-SignUpCompleteViewUI

🌱 PR Point

저번 회의 이후로 회원가입 뷰에서 닉네임, 이메일 텍스트 필드에서 확인 버튼을 눌렀을 때 사용 가능한 닉네임 또는 이메일일 경우 보라색 alert 텍스트가 나오도록 뷰가 변경되었습니다.
이걸 적용하려고 했는데 기존에 alert label의 분기 처리를 생각하지 않고 구현했어서 이를 수정하는 게 쉽지는 않았습니다 ㅠㅠ 그냥 제가 머리가 안 돌아간 건지...
아무튼 valid, invalid한 result에 따라 분기 처리를 하기 위해 enum을 활용했습니다. 사실 viewModel에서 DSKit을 import 한다면 enum을 CustomTextFieldView에 하나만 만들면 되는데 MVVM의 viewModel에서는 UI관련 모듈을 import 하지 않는 것이 좋다는 이야기를 들었어서 viewModel에 SignUpFormValidateResult enum을 따로 생성하고 VC에서 이를 extend 하여 문제를 해결했습니다.
가입 완료 뷰가 피그마에 추가되어서 해당 VC UI를 구현했습니다.

📌 참고 사항

분기 처리할 것들이 많았고 특히 비밀번호 쪽에서는 경우의 수가 많아서 처리하기 위해 if문을 많이 사용했는데 마음에 들지는 않지만 일단 올리겠습니다..ㅠㅠ
이제 서버 붙이기 시작하겠습니다~~

📸 스크린샷

기능	스크린샷
가입 완료 뷰
회원 가입 뷰

📮 관련 이슈

Resolved: [Feat] 회원가입 뷰 alert 분기 처리 및 가입 완료 뷰 구현 #32

…Result 사용

devxsby

고생하셨습니당 👏🏻

L-j-h-c

수고하셨습니다..! 역시 개발 중 변동사항에 대한 처리가 가장 어려운 부분 중 하나인 것 같네요.. 구조의 어려움은 어쩔 수 없지만 잘 처리하신 것 같아요!!

L-j-h-c · 2022-12-06T06:21:12Z

SOPT-Stamp-iOS/Projects/Presentation/Sources/SignUpScene/VC/SignUpVC.swift

+                self.passwordCheckTextFieldView.changeAlertLabelText(alertText)
+                if !alertText.isEmpty {
+                    self.passwordCheckTextFieldView.changeAlertLabelTextColor(toWarning: true)
+                    if alertText == I18N.SignUp.invalidPasswordForm {
+                        self.passwordTextFieldView.alertType = .invalidInput(text: "")
+                    } else {
+                        self.passwordTextFieldView.alertType = .validInput(text: "")
+                        self.passwordCheckTextFieldView.alertType = .invalidInput(text: alertText)
+                    }
+                } else {
+                    self.passwordTextFieldView.alertType = .validInput(text: "")
+                    self.passwordCheckTextFieldView.alertType = .validInput(text: "")
+                }


지금 하나의 alertType을 가지고 passwordTextField와 checkTextField 모두에 대한 데이터를 바인딩하려다 보니 분기가 복잡해지고 가독성도 떨어지는 것 같습니다.

각각의 텍필에 대한 데이터를 따로 만들어주고 바인딩하는 방식도 고려해 볼 수 있을 것 같아요...!

예를 들어 SignUpFormValidateResult의 extension에 메서드를 따로 만들어서 프로퍼티 각각을 참조하게 만드는 것입니다!

우선 true에 대한 입력만 받아야하는지는 모르겠지만

let needWarning = !alertText.isEmpty self.passwordCheckTextFieldView.changeAlertLabelTextColor(toWarning: needWarning)

이런 식으로 할 수 있을 것 같고

.map { $0.convertToTextFieldAlertType() }
의 경우에 alerType으로 변환해주고 있는데, 여기서도 alertType 자체가 아니라 text를 통해 분기처리를 하고 있어 불필요한 부분인 것 같습니다.

위의 부분을 매핑을 사용하지 않은 것으로 가정하면 아래와 같이 연산 프로퍼티를 따로 만들어 처리하는 것도 하나의 방법이라 생각합니다...!

self.passwordTextFieldView.alertType = signUpFormValidateResult.passwordAlertType self.passwordCheckTextFieldView.alertType = signUpFormValidateResult.passwordCheckAlertType

이 문제의 원인은 패스워드 텍스트필드가 2개고 alertTextLabel은 한 개라 입력 validation 이후에 분기 처리가 많이 필요했습니다. 따라서 심플하게 생각해서 CustomTextField 클래스에 alertDelegate라는 변수를 만들고 해당 값이 존재한다면 alert 기능을 delegate인 텍스트필드에 위임하도록 했습니다.

즉, 첫번째 패스워드 입력 뷰는 alertText를 보여주는 기능을 두번째 패스워드 입력 뷰에 위임하여 VC에서는 뷰의 delegate만 지정하고 첫번째 패스워드뷰에 alert를 보내면 알아서 내부적으로 두 번째 패스워드 뷰에 alert가 보이도록 했습니다.

이 방식으로 바꾸니까 VC에서는 닉네임, 이메일 텍스트필드처럼 패스워드 텍스트필드를 동일하게 다룰 수 있어서 가독성도 좋아진 것 같습니다. 한번 확인하고 피드백 주실 수 있나요!? 😃

yangsubinn

수고하셨습니다 .. 여기도 분기처리가 쉽지 않네요 .. 🫠👍

yangsubinn · 2022-12-06T15:26:40Z

SOPT-Stamp-iOS/Projects/Presentation/Sources/SignUpScene/ViewModel/SignUpViewModel.swift

@@ -79,26 +86,26 @@ extension SignUpViewModel {
        useCase.isNicknameValid.sink { event in
            print("SignUpViewModel - completion: \(event)")
        } receiveValue: { isNicknameValid in
-            isNicknameValid ? output.nicknameAlert.send("") : output.nicknameAlert.send(I18N.SignUp.duplicatedNickname)
+            isNicknameValid ? output.nicknameAlert.send(.valid(text: I18N.SignUp.validNickname)) : output.nicknameAlert.send(.invalid(text: I18N.SignUp.duplicatedNickname))


취향에 따라 가독성 좋은게 다를 것 같긴 한데,
요렇게 쓰는 것도 중복되는 코드 줄이는 면에서 나쁘지 않을 것 같아서 적어봅니다 !

output.nicknameAlert.send(isNicknameValid ? .valid(text: I18N.SignUp.validNickname) : .invalid(text: I18N.SignUp.duplicatedNickname))

오 확실히 더 가독성이 좋아보여요!!
반영해서 올렸습니다~~!!!

… 위임 구현

L-j-h-c

리뷰 반영하고 로직 고민하느라 고생하셨습니다!!

L-j-h-c · 2022-12-08T12:12:41Z

SOPT-Stamp-iOS/Projects/Modules/DSKit/Sources/Components/CustomTextFieldView.swift

+    public func setAlertDelegate(_ textView: CustomTextFieldView) -> Self {
+        self.alertDelegate = textView
+        return self
+    }
+
    /// 경고 문구 라벨의 text 설정
    public func changeAlertLabelText(_ alertText: String) {
+        if let alertDelegate = alertDelegate {
+            alertDelegate.changeAlertLabelText(alertText)
+            return
+        }


새로운 방식으로 하니 더 깔끔해지네요!! 비대한 함수의 기능이 잘 분리된 것 같아요👍 👍 평소에 하듯이 alertDelegate를 Protocol로 구현해주면 확장성도 좋아질 것 같아요~

프로토콜로 바꿔서 반영했습니다! 감사합니다~~!!

lsj8706 added 9 commits December 5, 2022 16:50

[Add] sopt-makers#32 - 컬러 에셋 추가

b6f02bc

[Add] sopt-makers#32 - StringLiteral에 SignUp String 추가

29ce220

[Feat] sopt-makers#32 - 사용 가능한 닉네임 또는 이메일 입력 시 UI 분기 처리 구현

ad58dda

[Feat] sopt-makers#32 - SignUp 뷰의 password 입력 로직 변경

b91a9fc

[Feat] sopt-makers#32 - SignUp 뷰의 password 입력 바인딩에 SignUpFormValidate…

317b94f

…Result 사용

[Add] sopt-makers#32 - 이미지 에셋 추가

f75b00c

[Feat] sopt-makers#32 - ModuleFactory에 SignUpCompleteVC 추가

c1fcf3e

[Feat] sopt-makers#32 - SignUpCompleteVC UI 구현

50c1be0

[Merge] sopt-makers#32 - pull develop

2b89e52

lsj8706 added Feat 새로운 기능 구현 세진🤝🏻 labels Dec 5, 2022

lsj8706 requested review from L-j-h-c, devxsby and yangsubinn December 5, 2022 11:35

lsj8706 self-assigned this Dec 5, 2022

pull-request-size bot added the size/L label Dec 5, 2022

devxsby approved these changes Dec 5, 2022

View reviewed changes

L-j-h-c approved these changes Dec 6, 2022

View reviewed changes

[Chore] sopt-makers#32 - SignUpFormValidateResult에 passwordAlertType 추가

6a43727

yangsubinn approved these changes Dec 6, 2022

View reviewed changes

lsj8706 added 3 commits December 8, 2022 19:22

[Feat] sopt-makers#32 - CustomTextField에 alertDelegate를 생성하여 alert 기능…

7307d42

… 위임 구현

[Merge] sopt-makers#32 - pull develop

8e1ce7c

[Chore] sopt-makers#32 - keyPath 구문 수정

1fa73df

L-j-h-c approved these changes Dec 8, 2022

View reviewed changes

lsj8706 added 2 commits December 8, 2022 22:36

[Chore] sopt-makers#32 - alertDelegate를 프로토콜로 타입 변경

97d1b79

[Chore] sopt-makers#32 - SignUpViewModel output에 삼항 연산자 변경

92ed5dc

lsj8706 merged commit 4e510cf into sopt-makers:develop Dec 8, 2022

lsj8706 deleted the feature/#32-SignUpView-alert-and-SignUpCompleteViewUI branch December 8, 2022 13:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] #32 - SignUpView alert 로직 변경 및 SignUpVC UI 구현 #33

[Feat] #32 - SignUpView alert 로직 변경 및 SignUpVC UI 구현 #33

lsj8706 commented Dec 5, 2022

devxsby left a comment

L-j-h-c left a comment

L-j-h-c Dec 6, 2022

lsj8706 Dec 8, 2022 •

edited

Loading

yangsubinn left a comment

yangsubinn Dec 6, 2022

lsj8706 Dec 8, 2022

L-j-h-c left a comment

L-j-h-c Dec 8, 2022

lsj8706 Dec 8, 2022

[Feat] #32 - SignUpView alert 로직 변경 및 SignUpVC UI 구현 #33

[Feat] #32 - SignUpView alert 로직 변경 및 SignUpVC UI 구현 #33

Conversation

lsj8706 commented Dec 5, 2022

🌴 PR 요약

🌱 PR Point

📌 참고 사항

📸 스크린샷

📮 관련 이슈

devxsby left a comment

Choose a reason for hiding this comment

L-j-h-c left a comment

Choose a reason for hiding this comment

L-j-h-c Dec 6, 2022

Choose a reason for hiding this comment

lsj8706 Dec 8, 2022 • edited Loading

Choose a reason for hiding this comment

yangsubinn left a comment

Choose a reason for hiding this comment

yangsubinn Dec 6, 2022

Choose a reason for hiding this comment

lsj8706 Dec 8, 2022

Choose a reason for hiding this comment

L-j-h-c left a comment

Choose a reason for hiding this comment

L-j-h-c Dec 8, 2022

Choose a reason for hiding this comment

lsj8706 Dec 8, 2022

Choose a reason for hiding this comment

lsj8706 Dec 8, 2022 •

edited

Loading