[Design] 사용자 등록 뷰 디자인

MemorialHouse/MHPresentation/MHPresentation/Source/Register/MHRegisterView.swift

@@ -0,0 +1,181 @@
+import UIKit
+import MHFoundation
+import Combine
+
+final class MHRegisterView: UIView {
+    static let textfieldSubject = PassthroughSubject<String, Never>()
+    static let buttonSubject = PassthroughSubject<Bool, Never>()
+
+    // MARK: - Property
+    private let coverImageView: UIImageView = {
+        let backgroundImageView = UIImageView()
+        backgroundImageView.image = UIImage.pinkBook
+
+        return backgroundImageView
+    }()
+    private static let registerButtonFontSize: CGFloat = 12
+    private static let registerTextFieldFontSize: CGFloat = 24
+    private let registerTextLabel: UILabel = {
+        let registerFont = UIFont.ownglyphBerry(size: registerTextFieldFontSize)
+
+        let textLabel = UILabel()
+        textLabel.text = """
+                        추억을 간직할
+                        기록소 이름을 작성해주세요
+                        """
+        textLabel.textAlignment = .center
+        textLabel.font = registerFont
+        textLabel.numberOfLines = 2
+
+        return textLabel
+    }()
+    let registerTextField: UITextField = {
+        let registerFont = UIFont.ownglyphBerry(size: registerButtonFontSize)
+
+        let textField = UITextField()
+        textField.font = registerFont
+        textField.borderStyle = .none
+
+        var attributedText = AttributedString(stringLiteral: "기록소")
+        attributedText.font = registerFont
+        textField.attributedPlaceholder = NSAttributedString(attributedText)
+
+        textField.tag = UITextField.Tag.register
+
+        return textField
+    }()
+    let registerButton: UIButton = {
+        let registerButton = UIButton(type: .custom)
+
+        var attributedString = AttributedString(stringLiteral: "다음")
+        attributedString.font = UIFont.ownglyphBerry(size: registerButtonFontSize)
+        attributedString.strokeColor = UIColor.mhTitle
+
+        registerButton.setAttributedTitle(NSAttributedString(attributedString), for: .normal)
+
+        registerButton.backgroundColor = .mhSection
+        registerButton.layer.borderColor = UIColor.mhBorder.cgColor
+        registerButton.layer.borderWidth = 1
+        registerButton.layer.cornerRadius = registerButtonFontSize
+
+        return registerButton
+    }()
+
+    // MARK: - Initializers
+    init() { super.init(frame: .zero) }
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        setup()
+        configureAddSubviewAndConstraints()
+    }
+
+    required init?(coder: NSCoder) {
+        fatalError("error: mhregisterview requires init(coder:)")
+    }
+
+    // MARK: - Setup
+    private func setup() {
+        addTouchEventToRegisterButton(registerButton)
+        addEditingChangedEventToRegisterTextField(registerTextField)
+        coverImageView.isUserInteractionEnabled = true
+    }
+
+    // MARK: - Configure
+    private func configureAddSubviewAndConstraints() {
+        coverImageView.setWidthAndHeight(width: self.frame.width, height: self.frame.height)
+        self.addSubview(coverImageView)
+
+        coverImageView.addSubview(registerTextLabel)
+        registerTextLabel.setAnchor(
+            leading: self.leadingAnchor,
+            constantLeading: 80,
+            trailing: self.trailingAnchor,
+            constantTrailing: 40,
+
+            height: MHRegisterView.registerTextFieldFontSize * 4
+        )
+
+        let registerTextFieldBackground = registerTextField
+                                            .embededInDefaultBackground(with:
+                                            UIEdgeInsets(top: 0, left: 5, bottom: 0, right: 5))
+        coverImageView.addSubview(registerTextFieldBackground)
+        registerTextFieldBackground.setAnchor(
+            top: registerTextLabel.bottomAnchor,
+            leading: self.leadingAnchor,
+            constantLeading: 80,
+            trailing: self.trailingAnchor,
+            constantTrailing: 40,
+            height: MHRegisterView.registerTextFieldFontSize * 2
+        )
+
+        let registerButtonBackground = UIView()
+        registerButtonBackground.backgroundColor = .mhSection
+        registerButtonBackground.layer.cornerRadius = MHRegisterView.registerButtonFontSize + 1
+        registerButtonBackground.clipsToBounds = true
+        registerButtonBackground.addSubview(registerButton)
+        registerButton.setAnchor(
+            top: registerButtonBackground.topAnchor, constantTop: 3,
+            leading: registerButtonBackground.leadingAnchor, constantLeading: 4,
+            bottom: registerButtonBackground.bottomAnchor, constantBottom: 3,
+            trailing: registerButtonBackground.trailingAnchor, constantTrailing: 4
+        )
+
+        coverImageView.addSubview(registerButtonBackground)
+        registerButtonBackground.setAnchor(
+            top: registerTextFieldBackground.bottomAnchor,
+            constantTop: 10,
+            leading: self.leadingAnchor,
+            constantLeading: MHRegisterView.registerTextFieldFontSize * 11,
+
+            width: MHRegisterView.registerButtonFontSize * 4 + 8,
+            height: MHRegisterView.registerButtonFontSize * 2 + 6
+        )
+    }
+
+    private func addTouchEventToRegisterButton(_ button: UIButton) {
+        let uiAction = UIAction { [weak self] _ in
+            guard let houseName = self?.registerTextField.text, !houseName.isEmpty else { return }
+
+            if self?.checkNameValidity(houseName) ?? false {
+                MHRegisterView.buttonSubject.send(true)
+                let userDefaults = UserDefaults.standard
+                userDefaults.set(houseName, forKey: Constant.houseNameUserDefaultKey)
+            } else {
+                MHRegisterView.buttonSubject.send(false)
+            }
+        }
+        registerButton.addAction(uiAction, for: .touchUpInside)
+    }
+
+    private func addEditingChangedEventToRegisterTextField(_ textfield: UITextField) {
+        let uiAction = UIAction { _ in
+            guard let inputText = textfield.text else { return }
+            MHRegisterView.textfieldSubject.send(inputText)
+
+            switch textfield.tag {
+            case UITextField.Tag.register:
+                if inputText.isEmpty == true {
+                    self.registerButton.isEnabled = false
+                } else {
+                    self.registerButton.isEnabled = true
+                }
+            default:
+                break
+            }
+        }
+        registerTextField.addAction(uiAction, for: .editingChanged)
+    }
+
+    private func checkNameValidity(_ name: String) -> Bool {
+        return name.count < 11 ? true : false
+    }
+}
+
+// MARK: - Tag for UITextField
+extension UITextField {
+    enum Tag {
+        static let register = 0
+    }
+}

MemorialHouse/MHPresentation/MHPresentation/Source/Register/RegisterViewController.swift

@@ -1,116 +1,52 @@
 import UIKit
 import MHFoundation
+import Combine
 
 public final class RegisterViewController: UIViewController {
-    // MARK: - Properties
-    private static let registerButtonFontSize: CGFloat = 12
-    private static let registerTextFieldFontSize: CGFloat = 24
-    private let registerTextField: UITextField = {
-        let registerFont = UIFont.ownglyphBerry(size: registerButtonFontSize)
-
-        let textField = UITextField()
-        textField.font = registerFont
-        textField.borderStyle = .roundedRect
-
-        var attributedText = AttributedString(stringLiteral: "기록소")
-        attributedText.font = registerFont
-        textField.attributedPlaceholder = NSAttributedString(attributedText)
-
-        textField.tag = UITextField.Tag.register
-
-        return textField
-    }()
-    private let registerButton: UIButton = {
-        let registerButton = UIButton(type: .custom)
-
-        var attributedString = AttributedString(stringLiteral: "다음")
-        attributedString.font = UIFont.ownglyphBerry(size: registerButtonFontSize)
-        attributedString.strokeColor = UIColor.mhTitle
-
-        registerButton.setAttributedTitle(NSAttributedString(attributedString), for: .normal)
-
-        registerButton.backgroundColor = UIColor.mhSection
-        registerButton.layer.borderColor = UIColor.mhBorder.cgColor
-        registerButton.layer.borderWidth = 1
-        registerButton.layer.cornerRadius = registerButtonFontSize
-
-        return registerButton
-    }()
+    var subscriptions = Set<AnyCancellable>()
+
+    // MARK: - Property
+    var registerView = MHRegisterView()
+    var username = ""
 
     // MARK: - Lifecycle
     public override func viewDidLoad() {
         super.viewDidLoad()
 
         setup()
-        configureAddSubView()
+        configureAddSubview()
         configureConstraints()
     }
 
-    // MARK: - Setup
     private func setup() {
         view.backgroundColor = .baseBackground
 
-        addTouchEventToRegisterButton(registerButton)
-    }
-
-    // MARK: - Configure
-    private func configureAddSubView() {
-        view.addSubview(registerTextField)
-        view.addSubview(registerButton)
-    }
-    private func configureConstraints() {
-        registerTextField.setHeight(RegisterViewController.registerTextFieldFontSize)
-        registerTextField.setWidth(RegisterViewController.registerTextFieldFontSize * 8)
-        registerTextField.setCenter(view: view)
-
-        registerButton.setHeight(RegisterViewController.registerButtonFontSize * 2)
-        registerButton.setWidth(RegisterViewController.registerButtonFontSize * 4)
-        registerButton.setTop(anchor: registerTextField.bottomAnchor, constant: 6)
-        registerButton.setLeading(anchor: registerTextField.trailingAnchor, constant: -6)
-    }
-
-    private func addTouchEventToRegisterButton(_ button: UIButton) {
-        let uiAction = UIAction { [weak self] _ in
-            // TODO: - 저장소 중복 체크
-
-            guard let houseName = self?.registerTextField.text, !houseName.isEmpty else { return }
-
-            let userDefaults = UserDefaults.standard
-
-            userDefaults.set(houseName, forKey: Constant.houseNameUserDefaultKey)
-            let homeViewModel = HomeViewModel(houseName: houseName)
-            self?.navigationController?.pushViewController(HomeViewController(viewModel: homeViewModel), animated: false)
-            self?.navigationController?.viewControllers.removeFirst()    // inactive back to register view
-        }
+        MHRegisterView.textfieldSubject.sink { text in
+            self.username = text
+        }.store(in: &subscriptions)
 
-        button.addAction(uiAction, for: .touchUpInside)
-    }
-}
-
-// MARK: - UITextFieldDelegate
-extension RegisterViewController: UITextFieldDelegate {
-    public func textField(
-        _ textField: UITextField,
-        shouldChangeCharactersIn range: NSRange,
-        replacementString string: String) -> Bool {
-        switch textField.tag {
-        case UITextField.Tag.register:
-            if string.isEmpty {
-                registerButton.isEnabled = false
+        MHRegisterView.buttonSubject.sink { isValid in
+            if isValid {
+                let homeViewController = HomeViewController(viewModel: HomeViewModel(houseName: self.username))
+                self.navigationController?.pushViewController(homeViewController, animated: false)
+                self.navigationController?.viewControllers.removeFirst()    // inactive back to register view
             } else {
-                registerButton.isEnabled = true
+                // TODO: - 기록소 이름 조건이 안맞는 부분 처리
             }
-        default:
-            break
-        }
+        }.store(in: &subscriptions)
 
-        return true
+        registerView = MHRegisterView(
+            frame: CGRect.init(x: 0, y: 0, width: view.bounds.width - 50, height: view.bounds.height - 640))
     }
-}
-
-// MARK: - Tag for UITextField
-extension UITextField {
-    enum Tag {
-        static let register = 0
+
+    private func configureAddSubview() {
+        self.view.addSubview(registerView)
+    }
+
+    private func configureConstraints() {
+        registerView.setTop(anchor: self.view.topAnchor, constant: 320)
+        registerView.setBottom(anchor: self.view.bottomAnchor, constant: 320)
+        registerView.setLeading(anchor: self.view.leadingAnchor, constant: 25)
+        registerView.setTrailing(anchor: self.view.trailingAnchor, constant: 25)
     }
 }