기록소 등록하는 첫 화면 UI 구현

MemorialHouse/MHPresentation/MHPresentation/Resource/Images.xcassets/RegisterBookImage.imageset/Contents.json

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

MemorialHouse/MHPresentation/MHPresentation/Source/Design/MHRegisterView.swift

@@ -0,0 +1,67 @@
+import UIKit
+
+final class MHRegisterView: UIView {
+    // MARK: UI Components
+    let registerTextField: UITextField = {
+        let registerFont = UIFont.ownglyphBerry(size: 12)
+
+        let textField = UITextField()
+        textField.font = registerFont
+
+        var attributedText = AttributedString(stringLiteral: "ex) 영현")
+        attributedText.font = registerFont
+        textField.textAlignment = .right
+        textField.attributedPlaceholder = NSAttributedString(attributedText)
+
+        return textField
+    }()
+    private let registerLabel = UILabel(style: .header2)
+
+    // MARK: - Initializer
+    init() {
+        super.init(frame: .zero)
+
+        setup()
+        configureAddSubview()
+        configureLayout()
+    }
+
+    required init?(coder: NSCoder) {
+        super.init(coder: coder)
+
+        setup()
+        configureAddSubview()
+        configureLayout()
+    }
+
+    func configure(textFieldAction: @escaping (String?) -> Void) {
+        registerTextField.addAction(UIAction { [weak self] _ in
+            guard let self else { return }
+            textFieldAction(self.registerTextField.text)
+        }, for: .editingChanged)
+    }
+
+    // MARK: - Setup & Configuration
+    private func setup() {
+        backgroundColor = .baseBackground
+        registerLabel.text = "기록소"
+    }
+
+    private func configureAddSubview() {
+        addSubview(registerTextField)
+        addSubview(registerLabel)
+    }
+
+    private func configureLayout() {
+        registerTextField.setAnchor(
+            top: topAnchor,
+            leading: leadingAnchor,
+            bottom: bottomAnchor,
+            trailing: registerLabel.leadingAnchor, constantTrailing: 8
+        )
+        registerLabel.setAnchor(
+            trailing: trailingAnchor, constantTrailing: 4
+        )
+        registerLabel.setCenterY(view: self)
+    }
+}

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

@@ -13,7 +13,7 @@ public final class RegisterViewController: UIViewController {
     // MARK: - UI Components
     private let coverImageView: UIImageView = {
         let backgroundImageView = UIImageView()
-        backgroundImageView.image = UIImage.pinkBook
+        backgroundImageView.image = .registerBook
 
         return backgroundImageView
     }()
@@ -31,18 +31,7 @@ public final class RegisterViewController: UIViewController {
 
         return textLabel
     }()
-    private let registerTextField: UITextField = {
-        let registerFont = UIFont.ownglyphBerry(size: 12)
-
-        let textField = UITextField()
-        textField.font = registerFont
-
-        var attributedText = AttributedString(stringLiteral: "기록소")
-        attributedText.font = registerFont
-        textField.attributedPlaceholder = NSAttributedString(attributedText)
-
-        return textField
-    }()
+    private let mhRegisterView = MHRegisterView()
     private let registerButton: UIButton = {
         let registerButton = UIButton(type: .custom)
 
@@ -93,7 +82,10 @@ public final class RegisterViewController: UIViewController {
         view.backgroundColor = .baseBackground
 
         addTouchEventToRegisterButton(registerButton)
-        addEditingChangedEventToRegisterTextField(registerTextField)
+        mhRegisterView.configure { [weak self] text in
+            guard let self else { return }
+            self.input.send(.registerTextFieldEdited(text: text))
+        }
         coverImageView.isUserInteractionEnabled = true
         registerButton.isEnabled = false
     }
@@ -141,31 +133,28 @@ public final class RegisterViewController: UIViewController {
     private func configureAddSubview() {
         view.addSubview(coverImageView)
         view.addSubview(registerTextLabel)
-        view.addSubview(registerTextField)
+        view.addSubview(mhRegisterView)
         view.addSubview(registerButton)
     }
 
     private func configureConstraints() {
         coverImageView.setCenter(view: view)
-        coverImageView.setWidth(view.frame.width - 50)
-        coverImageView.setHeight(240)
+        coverImageView.setWidth(view.frame.width - 60)
+        coverImageView.setHeight(250)
 
         registerTextLabel.setAnchor(
-            top: coverImageView.topAnchor,
+            top: coverImageView.topAnchor, constantTop: 38,
             leading: coverImageView.leadingAnchor, constantLeading: 80,
-            trailing: coverImageView.trailingAnchor, constantTrailing: 40,
-            height: 96
+            trailing: coverImageView.trailingAnchor, constantTrailing: 40
         )
 
-        let registerTextFieldBackground = registerTextField.embededInDefaultBackground(
-            with: UIEdgeInsets(top: 0, left: 10, bottom: 0, right: 5)
-        )
+        let registerTextFieldBackground = mhRegisterView.embededInDefaultBackground()
         coverImageView.addSubview(registerTextFieldBackground)
         registerTextFieldBackground.setAnchor(
-            top: registerTextLabel.bottomAnchor,
-            leading: coverImageView.leadingAnchor, constantLeading: 80,
-            trailing: coverImageView.trailingAnchor, constantTrailing: 40,
-            height: 44
+            top: registerTextLabel.bottomAnchor, constantTop: 24,
+            leading: coverImageView.leadingAnchor, constantLeading: 52,
+            trailing: coverImageView.trailingAnchor, constantTrailing: 28,
+            height: 60
         )
 
         let registerButtonBackground = UIView()
@@ -182,26 +171,18 @@ public final class RegisterViewController: UIViewController {
 
         coverImageView.addSubview(registerButtonBackground)
         registerButtonBackground.setAnchor(
-            top: registerTextFieldBackground.bottomAnchor, constantTop: 10,
-            leading: view.leadingAnchor, constantLeading: 260,
+            bottom: coverImageView.bottomAnchor, constantBottom: 14,
+            trailing: coverImageView.trailingAnchor, constantTrailing: 17,
             width: 60,
             height: 36
         )
     }
 
     private func addTouchEventToRegisterButton(_ button: UIButton) {
         let uiAction = UIAction { [weak self] _ in
-            guard let self, let memorialHouseName = self.registerTextField.text else { return }
+            guard let self, let memorialHouseName = self.mhRegisterView.registerTextField.text else { return }
             self.input.send(.registerButtonTapped(memorialHouseName: memorialHouseName))
         }
         registerButton.addAction(uiAction, for: .touchUpInside)
     }
-
-    private func addEditingChangedEventToRegisterTextField(_ textfield: UITextField) {
-        let uiAction = UIAction { [weak self] _ in
-            guard let self else { return }
-            self.input.send(.registerTextFieldEdited(text: textfield.text))
-        }
-        registerTextField.addAction(uiAction, for: .editingChanged)
-    }
 }

MemorialHouse/MHPresentation/MHPresentation/Source/Register/RegisterViewModel.swift

@@ -45,6 +45,7 @@ public final class RegisterViewModel: ViewModelType {
         output.send(.registerButtonEnabled(isEnabled: !text.isEmpty && text.count < 11))
     }
 
+    @MainActor
     private func registerButtonTapped(with memorialHouseName: String) async {
         do {
             try await createMemorialHouseNameUseCase.execute(with: memorialHouseName)