Merge pull request #33 from lsj8706/feature/#32-SignUpView-alert-and-…

…SignUpCompleteViewUI

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

SOPT-Stamp-iOS/Projects/Core/Sources/Literals/StringLiterals.swift

@@ -40,10 +40,15 @@ public struct I18N {
         public static let passwordTextFieldPlaceholder = "영문, 숫자, 특수문자 포함 8-15자로 입력해주세요."
         public static let passwordCheckTextFieldPlaceholder = "확인을 위해 비밀번호를 한 번 더 입력해주세요."
         public static let register = "가입하기"
+        public static let validNickname = "사용 가능한 이름입니다."
         public static let duplicatedNickname = "사용 중인 이름입니다."
+        public static let validEmail = "사용 가능한 이메일입니다."
         public static let invalidEmailForm = "잘못된 이메일 형식입니다."
         public static let invalidPasswordForm = "영문, 숫자, 특수문자 포함 8-15자로 입력해주세요."
         public static let passwordNotAccord = "비밀번호가 일치하지 않습니다."
+        public static let signUpComplete = "가입 완료"
+        public static let welcome = "SOPTAMP에 오신 것을 환영합니다"
+        public static let start = "시작하기"
     }
 
     public struct ListDetail {

SOPT-Stamp-iOS/Projects/Modules/DSKit/Resources/Assets.xcassets/SignUp/Contents.json

@@ -0,0 +1,6 @@
+{
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SOPT-Stamp-iOS/Projects/Modules/DSKit/Resources/Assets.xcassets/SignUp/signUpCompleteImg.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "Group 57203.png",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "Group 57203@2x.png",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "Group 57203@3x.png",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

SOPT-Stamp-iOS/Projects/Modules/DSKit/Resources/Colors.xcassets/PointColor/access300.colorset/Contents.json

@@ -0,0 +1,20 @@
+{
+  "colors" : [
+    {
+      "color" : {
+        "color-space" : "srgb",
+        "components" : {
+          "alpha" : "1.000",
+          "blue" : "0xB1",
+          "green" : "0x4A",
+          "red" : "0x78"
+        }
+      },
+      "idiom" : "universal"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

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

@@ -44,15 +44,16 @@ public enum TextFieldType {
 public enum TextFieldViewState {
     case normal
     case editing
-    case alert
+    case warningAlert
+    case confirmAlert
 
     var backgroundColor: UIColor {
         switch self {
         case .normal:
             return DSKitAsset.Colors.gray50.color
-        case .editing:
+        case .editing, .confirmAlert:
             return DSKitAsset.Colors.white.color
-        case .alert:
+        case .warningAlert:
             return DSKitAsset.Colors.error100.color
         }
     }
@@ -61,12 +62,54 @@ public enum TextFieldViewState {
         switch self {
         case .normal:
             return nil
-        case .editing:
+        case .editing, .confirmAlert:
             return DSKitAsset.Colors.purple300.color.cgColor
-        case .alert:
+        case .warningAlert:
             return DSKitAsset.Colors.error200.color.cgColor
         }
     }
+
+    var alertTextColor: UIColor? {
+        switch self {
+        case .normal, .editing:
+            return nil
+        case .confirmAlert:
+            return DSKitAsset.Colors.access300.color
+        case .warningAlert:
+            return DSKitAsset.Colors.error300.color
+        }
+    }
+}
+
+@frozen
+public enum TextFieldAlertType {
+    case validInput(text: String)
+    case invalidInput(text: String)
+    case none
+
+    public var alertText: String {
+        switch self {
+        case .validInput(let text), .invalidInput(let text):
+            return text
+        case .none:
+            return ""
+        }
+    }
+
+    public var textFieldSate: TextFieldViewState {
+        switch self {
+        case .validInput:
+            return .confirmAlert
+        case .invalidInput:
+            return .warningAlert
+        case .none:
+            return .normal
+        }
+    }
+}
+
+public protocol CustomTextFieldViewAlertDelegate: AnyObject {
+    func changeAlertLabelText(_ alertText: String)
 }
 
 public class CustomTextFieldView: UIView {
@@ -93,6 +136,15 @@ public class CustomTextFieldView: UIView {
             .asDriver()
     }
 
+    public var alertType: TextFieldAlertType = .none {
+        didSet {
+            bindAlertType(alertType)
+        }
+    }
+
+    /// alert Label을 다른 CustomTextField에 보여주기 위한 delegate
+    weak var alertDelegate: CustomTextFieldViewAlertDelegate?
+
     private var cancelBag = CancelBag()
 
     // MARK: - UI Component
@@ -189,24 +241,24 @@ extension CustomTextFieldView {
         return self
     }
 
+    /// alertText를 다른 TextField에 보여주기 위한 delegate 설정
+    public func setAlertDelegate(_ textView: CustomTextFieldViewAlertDelegate) -> Self {
+        self.alertDelegate = textView
+        return self
+    }
+
     /// 경고 문구 라벨의 text 설정
     public func changeAlertLabelText(_ alertText: String) {
+        if let alertDelegate = alertDelegate {
+            alertDelegate.changeAlertLabelText(alertText)
+            return
+        }
         self.alertlabel.text = alertText
         self.alertlabel.isHidden = false
     }
 
-    private func setDelegate() {
-        self.textField.delegate = self
-    }
-
     /// textField의 state를 지정하여 자동으로 배경색과 테두리 색이 바뀌도록 설정
     public func setTextFieldViewState(_ state: TextFieldViewState) {
-
-        var state = state
-        if state == .normal && (textField.isEditing || !textField.isEmpty) {
-            state = .editing
-        }
-
         textFieldContainerView.backgroundColor = state.backgroundColor
 
         if let borderColor = state.borderColor {
@@ -215,6 +267,14 @@ extension CustomTextFieldView {
         } else {
             textFieldContainerView.layer.borderWidth = 0
         }
+
+        if state == .confirmAlert || state == .warningAlert {
+            alertlabel.textColor = state.alertTextColor
+        }
+    }
+
+    private func setDelegate() {
+        self.textField.delegate = self
     }
 
     private func bindUI() {
@@ -232,32 +292,14 @@ extension CustomTextFieldView {
 // MARK: - Input Binding
 
 extension CustomTextFieldView {
-    var alertText: String {
-        get { return alertlabel.text ?? "" }
-        set { bindAlertText(newValue) }
-    }
 
-    private func bindAlertText(_ alertText: String) {
-        self.changeAlertLabelText(alertText)
-        if !alertText.isEmpty {
-            self.setTextFieldViewState(.alert)
-        }
+    var alertText: String {
+        return alertlabel.text ?? ""
     }
 
-    public enum InputCase {
-         case alert
-         case passwordAlert
-
-         var keyPath: AnyKeyPath {
-             switch self {
-             case .alert: return \CustomTextFieldView.alertText
-             case .passwordAlert: return \CustomTextFieldView.textChanged
-             }
-         }
-     }
-
-    public func bindableInput<T>(_ input: InputCase) -> ReferenceWritableKeyPath<CustomTextFieldView, T> {
-        return input.keyPath as! ReferenceWritableKeyPath<CustomTextFieldView, T>
+    private func bindAlertType(_ alertType: TextFieldAlertType) {
+        self.changeAlertLabelText(alertType.alertText)
+        self.setTextFieldViewState(alertType.textFieldSate)
     }
 }
 
@@ -426,8 +468,22 @@ extension CustomTextFieldView: UITextFieldDelegate {
     }
 
     public func textFieldDidEndEditing(_ textField: UITextField) {
-        if let isEmpty = textField.text?.isEmpty {
-            isEmpty ? self.setTextFieldViewState(.normal) : self.setTextFieldViewState(.editing)
+        if textField.isEmpty {
+            self.setTextFieldViewState(.normal)
+        } else {
+            if case .invalidInput = alertType {
+                return
+            }
+            self.setTextFieldViewState(.editing)
         }
     }
 }
+
+// MARK: - CustomTextFieldViewAlertDelegate
+
+extension CustomTextFieldView: CustomTextFieldViewAlertDelegate {
+    /// 경고 문구 라벨의 컬러 설정
+    public func changeAlertLabelTextColor(toWarning: Bool) {
+        alertlabel.textColor = toWarning ? SoptampColor.error300.color : SoptampColor.access300.color
+    }
+}

SOPT-Stamp-iOS/Projects/Presentation/Sources/ModuleFactoryInterface.swift

@@ -14,6 +14,7 @@ public protocol ModuleFactoryInterface {
     func makeSplashVC() -> SplashVC
     func makeOnboardingVC() -> OnboardingVC
     func makeSignUpVC() -> SignUpVC
+    func makeSignUpCompleteVC() -> SignUpCompleteVC
     func makeMissionListVC(sceneType: MissionListSceneType) -> MissionListVC
     func makeListDetailVC(sceneType: ListDetailSceneType, starLevel: StarViewLevel) -> ListDetailVC
     func makeRankingVC() -> RankingVC

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

@@ -0,0 +1,91 @@
+//
+//  SignUpCompleteVC.swift
+//  Presentation
+//
+//  Created by sejin on 2022/12/05.
+//  Copyright © 2022 SOPT-Stamp-iOS. All rights reserved.
+//
+
+import UIKit
+
+import Combine
+
+import Core
+import DSKit
+
+public class SignUpCompleteVC: UIViewController {
+
+    // MARK: - Properties
+
+    public var factory: ModuleFactoryInterface!
+
+    // MARK: - UI Components
+
+    private let characterImageView = UIImageView().then {
+        $0.image = DSKitAsset.Assets.signUpCompleteImg.image.withRenderingMode(.alwaysOriginal)
+        $0.contentMode = .scaleAspectFit
+        $0.clipsToBounds = true
+    }
+
+    private let signUpCompleteLabel = UILabel().then {
+        $0.text = I18N.SignUp.signUpComplete
+        $0.textColor = DSKitAsset.Colors.gray900.color
+        $0.font = UIFont.h1
+    }
+
+    private let welcomeLabel = UILabel().then {
+        $0.text = I18N.SignUp.welcome
+        $0.textColor = DSKitAsset.Colors.gray500.color
+        $0.font = UIFont.subtitle2
+    }
+
+    private let startButton = CustomButton(title: I18N.SignUp.start)
+        .setEnabled(true)
+
+    // MARK: - View Life Cycle
+
+    public override func viewDidLoad() {
+        super.viewDidLoad()
+        self.setUI()
+        self.setLayout()
+    }
+}
+
+// MARK: - Methods
+
+extension SignUpCompleteVC {
+
+}
+
+// MARK: - UI & Layout
+
+extension SignUpCompleteVC {
+    private func setUI() {
+        self.view.backgroundColor = .white
+    }
+
+    private func setLayout() {
+        self.view.addSubviews(characterImageView, signUpCompleteLabel, welcomeLabel, startButton)
+
+        characterImageView.snp.makeConstraints { make in
+            make.centerX.equalTo(view.safeAreaLayoutGuide)
+            make.centerY.equalTo(view.safeAreaLayoutGuide).multipliedBy(0.75)
+        }
+
+        signUpCompleteLabel.snp.makeConstraints { make in
+            make.top.equalTo(characterImageView.snp.bottom).offset(16)
+            make.centerX.equalTo(characterImageView)
+        }
+
+        welcomeLabel.snp.makeConstraints { make in
+            make.top.equalTo(signUpCompleteLabel.snp.bottom).offset(4)
+            make.centerX.equalTo(view.safeAreaLayoutGuide)
+        }
+
+        startButton.snp.makeConstraints { make in
+            make.bottom.equalTo(view.safeAreaLayoutGuide).inset(32)
+            make.leading.trailing.equalTo(view.safeAreaLayoutGuide).inset(20)
+            make.height.equalTo(56)
+        }
+    }
+}