[SOOUM-14] 로그인/회원가입/계정이관코드입력 화면 개선

SOOUM/Podfile

@@ -23,8 +23,11 @@ def pods
   pod 'Then', '~> 3.0.0'
   pod 'Kingfisher', '~> 7.10.0'
   pod 'YPImagePicker', '~> 5.2.2'
+  pod 'SwiftEntryKit', '~> 2.0.0'
 
   pod 'CocoaLumberjack/Swift', '~> 3.7.2'
+
+  pod 'lottie-ios'
 end
 
 target 'SOOUM-Dev' do

SOOUM/Podfile.lock

@@ -127,6 +127,7 @@ PODS:
     - GoogleUtilities/Logger
     - GoogleUtilities/Privacy
   - Kingfisher (7.10.2)
+  - lottie-ios (4.5.1)
   - nanopb (2.30910.0):
     - nanopb/decode (= 2.30910.0)
     - nanopb/encode (= 2.30910.0)
@@ -153,6 +154,7 @@ PODS:
   - RxSwift (6.8.0)
   - SnapKit (5.7.1)
   - SteviaLayout (5.1.2)
+  - SwiftEntryKit (2.0.0)
   - SwiftLint (0.56.2)
   - Then (3.0.0)
   - WeakMapTable (1.2.0)
@@ -168,12 +170,14 @@ DEPENDENCIES:
   - Firebase/Crashlytics (~> 10.22.0)
   - Firebase/Messaging (~> 10.22.0)
   - Kingfisher (~> 7.10.0)
+  - lottie-ios
   - ReactorKit (~> 3.2.0)
   - RxCocoa (~> 6.8.0)
   - RxGesture (~> 4.0.4)
   - RxKeyboard (~> 2.0.0)
   - RxSwift (~> 6.8.0)
   - SnapKit (~> 5.7.1)
+  - SwiftEntryKit (~> 2.0.0)
   - SwiftLint (~> 0.56.2)
   - Then (~> 3.0.0)
   - YPImagePicker (~> 5.2.2)
@@ -196,6 +200,7 @@ SPEC REPOS:
     - GoogleDataTransport
     - GoogleUtilities
     - Kingfisher
+    - lottie-ios
     - nanopb
     - PromisesObjC
     - PromisesSwift
@@ -208,6 +213,7 @@ SPEC REPOS:
     - RxSwift
     - SnapKit
     - SteviaLayout
+    - SwiftEntryKit
     - SwiftLint
     - Then
     - WeakMapTable
@@ -230,6 +236,7 @@ SPEC CHECKSUMS:
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
   GoogleUtilities: ea963c370a38a8069cc5f7ba4ca849a60b6d7d15
   Kingfisher: 99edc495d3b7607e6425f0d6f6847b2abd6d716d
+  lottie-ios: 248b380fa1b97d18e792c37d90da7ab2aa0d6562
   nanopb: 438bc412db1928dac798aa6fd75726007be04262
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   PromisesSwift: 9d77319bbe72ebf6d872900551f7eeba9bce2851
@@ -242,11 +249,12 @@ SPEC CHECKSUMS:
   RxSwift: 4e28be97cbcfeee614af26d83415febbf2bf6f45
   SnapKit: d612e99e678a2d3b95bf60b0705ed0a35c03484a
   SteviaLayout: 05424e528d643657d39ce72c786e4adf13cfc5f2
+  SwiftEntryKit: 61b5fa36f34a97dd8013e48a7345bc4c4720be9a
   SwiftLint: bd7cfb914762ab5f0cbb632964849571db075706
   Then: 844265ae87834bbe1147d91d5d41a404da2ec27d
   WeakMapTable: 05c694ce8439a7a9ebabb56187287a63c57673d6
   YPImagePicker: afc81b3cffab05a6e7261c5daf80dc31b4e917b4
 
-PODFILE CHECKSUM: 77a47a04877511a9af2378cb76d7e51ca6d46f27
+PODFILE CHECKSUM: f064785e258ff9ada0428a59015c8a3fd3ccfe5d
 
 COCOAPODS: 1.16.2

SOOUM/SOOUM/Base/BaseNavigationViewController.swift

@@ -101,6 +101,8 @@ class BaseNavigationViewController: BaseViewController {
             $0.trailing.equalTo(self.navigationBar.snp.trailing)
             $0.height.equalTo(1.4)
         }
+        // 로딩 뷰는 항상 최상단에 표시
+        self.view.bringSubviewToFront(self.loadingIndicatorView)
     }
 
     override func bind() {

SOOUM/SOOUM/Base/BaseViewController.swift

@@ -13,12 +13,15 @@ import RxSwift
 import SnapKit
 import Then
 
+import Lottie
+
 
 class BaseViewController: UIViewController {
 
     var disposeBag = DisposeBag()
 
     let activityIndicatorView = SOMActivityIndicatorView()
+    let loadingIndicatorView = SOMLoadingIndicatorView()
 
     private(set) var isEndEditingWhenWillDisappear: Bool = true
 
@@ -58,6 +61,11 @@ class BaseViewController: UIViewController {
             $0.centerX.equalTo(self.view.safeAreaLayoutGuide.snp.centerX)
             $0.centerY.equalTo(self.view.safeAreaLayoutGuide.snp.centerY)
         }
+
+        self.view.addSubview(self.loadingIndicatorView)
+        self.loadingIndicatorView.snp.makeConstraints {
+            $0.edges.equalToSuperview()
+        }
 
         self.bind()
 

SOOUM/SOOUM/DesignSystem/Components/SOMActivityIndicatorView.swift

@@ -71,13 +71,13 @@ class SOMActivityIndicatorView: UIActivityIndicatorView {
 
         self.tintColor = .clear
 
-        self.addSubviews(self.backgroundView)
+        self.addSubview(self.backgroundView)
         self.backgroundView.snp.makeConstraints {
             $0.center.equalToSuperview()
             $0.size.equalTo(40)
         }
 
-        self.backgroundView.addSubviews(self.imageView)
+        self.backgroundView.addSubview(self.imageView)
         self.imageView.snp.makeConstraints {
             $0.center.equalToSuperview()
             $0.size.equalTo(28)

SOOUM/SOOUM/DesignSystem/Components/SOMButton.swift

@@ -7,105 +7,158 @@
 
 import UIKit
 
-
 class SOMButton: UIButton {
 
     var title: String? {
         didSet {
             if oldValue != self.title {
-                self.setConfiguration()
+                self.setNeedsUpdateConfiguration()
             }
         }
     }
 
-    var image: UIImage? {
+    var typography: Typography? {
         didSet {
-            if oldValue != self.image {
-                self.setConfiguration()
+            if oldValue != self.typography {
+                self.setNeedsUpdateConfiguration()
             }
         }
     }
 
-    var typography: Typography? {
+    var hasUnderlined: Bool? {
         didSet {
-            if oldValue != self.typography {
-                self.setConfiguration()
+            if oldValue != self.hasUnderlined {
+                self.setNeedsUpdateConfiguration()
             }
         }
     }
 
-    var foregroundColor: UIColor? {
+    var inset: UIEdgeInsets? {
         didSet {
-            if oldValue != self.foregroundColor {
-                self.setConfiguration()
+            if oldValue != self.inset {
+                self.setNeedsUpdateConfiguration()
             }
         }
     }
 
-    var hasUnderlined: Bool? {
+    var image: UIImage? {
         didSet {
-            if oldValue != self.hasUnderlined {
-                self.setConfiguration()
+            if oldValue != self.image {
+                self.setNeedsUpdateConfiguration()
+            }
+        }
+    }
+
+    var imagePlacement: NSDirectionalRectEdge? {
+        didSet {
+            if oldValue != self.imagePlacement {
+                self.setNeedsUpdateConfiguration()
+            }
+        }
+    }
+
+    var foregroundColor: UIColor? {
+        didSet {
+            if oldValue != self.foregroundColor {
+                self.setNeedsUpdateConfiguration()
             }
         }
     }
 
     override init(frame: CGRect) {
         super.init(frame: .zero)
+        self.setupConfiguration()
     }
 
     required init?(coder: NSCoder) {
         fatalError("init(coder:) has not been implemented")
     }
+}
+
+private extension SOMButton {
 
-    private func setConfiguration() {
+    func setupConfiguration() {
 
         var configuration = UIButton.Configuration.plain()
+        configuration.contentInsets = .zero
 
-        // 이미지 설정
-        if let image = self.image {
-            configuration.image = image
+        self.configuration = configuration
+        self.backgroundColor = .clear
+        self.layer.cornerRadius = 10
+        self.clipsToBounds = true
+
+        self.configurationUpdateHandler = { [weak self] button in
+            guard let self = self else { return }
+
+            var updatedConfig = button.configuration
 
-            if let foregroundColor = self.foregroundColor {
-                configuration.image?.withTintColor(foregroundColor)
-                configuration.imageColorTransformer = UIConfigurationColorTransformer { _ in
-                    foregroundColor
+            updatedConfig?.background.backgroundColor = self.backgroundColor
+            updatedConfig?.background.backgroundColorTransformer = UIConfigurationColorTransformer { _ in
+                // 비활성화 상태일 때, backgroundColor
+                if button.isEnabled == false {
+                    return .som.v2.gray200
                 }
+                // 하이라이트 상태일 때, backgroundColor
+                if button.isHighlighted {
+                    var highlightedColor: UIColor {
+                        if self.backgroundColor == .som.v2.black {
+                            return .som.v2.gray600
+                        }
+                        if self.backgroundColor == .som.v2.gray100 {
+                            return .som.v2.gray200
+                        }
+                        if self.backgroundColor == .clear || self.backgroundColor == .som.v2.white{
+                            return .som.v2.gray100
+                        }
+                        return self.backgroundColor ?? .clear
+                    }
+                    return highlightedColor
+                }
+                // 기본 상태일 때, backgroundColor
+                return self.backgroundColor ?? .clear
             }
+
+            self.applyConfiguration(to: &updatedConfig)
+            button.configuration = updatedConfig
+        }
+    }
+
+    func applyConfiguration(to configuration: inout UIButton.Configuration?) {
+
+        var foregroundColor: UIColor {
+            return self.isEnabled ? (self.foregroundColor ?? .som.v2.white) : .som.v2.gray400
+        }
+
+        if let image = self.image {
+            configuration?.image = image
+            configuration?.imageColorTransformer = UIConfigurationColorTransformer { _ in foregroundColor }
+            configuration?.imagePadding = 8
+            configuration?.imagePlacement = self.imagePlacement ?? .leading
         }
 
-        // 타이틀 설정
         if let title = self.title, let typography = self.typography {
             var attributes = typography.attributes
             attributes.updateValue(typography.font, forKey: .font)
-
-            if let foregroundColor = self.foregroundColor {
-                attributes.updateValue(foregroundColor, forKey: .foregroundColor)
-            }
+            attributes.updateValue(foregroundColor, forKey: .foregroundColor)
 
             if self.hasUnderlined == true {
                 attributes.updateValue(NSUnderlineStyle.single.rawValue, forKey: .underlineStyle)
-                attributes.updateValue(foregroundColor ?? UIColor.som.gray400, forKey: .underlineColor)
+                attributes.updateValue(foregroundColor, forKey: .underlineColor)
             }
 
-            configuration.attributedTitle = .init(title, attributes: AttributeContainer(attributes))
-            configuration.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { _ in
-                AttributeContainer(attributes)
+            if let inset = self.inset {
+                configuration?.contentInsets = .init(
+                    top: inset.top,
+                    leading: inset.left,
+                    bottom: inset.bottom,
+                    trailing: inset.right
+                )
             }
 
-            if image == nil {
-                configuration.titleAlignment = .center
-            } else {
-                configuration.imagePadding = 2
+            configuration?.attributedTitle = .init(title, attributes: AttributeContainer(attributes))
+            configuration?.titleTextAttributesTransformer = UIConfigurationTextAttributesTransformer { _ in
+                AttributeContainer(attributes)
             }
         }
-
-        if self.backgroundColor == nil {
-            self.backgroundColor = .clear
-
-            configuration.contentInsets = .zero
-        }
-
-        self.configuration = configuration
     }
 }

SOOUM/SOOUM/DesignSystem/Components/SOMDialogController/SOMDialogAction.swift

@@ -17,7 +17,7 @@ class SOMDialogAction {
         var backgroundColor: UIColor {
             switch self {
             case .primary:
-                return .som.p300
+                return .som.v2.black
             case .gray:
                 return .som.gray300
             }
@@ -26,7 +26,7 @@ class SOMDialogAction {
         var foregroundColor: UIColor {
             switch self {
             case .primary:
-                return .som.white
+                return .som.v2.white
             case .gray:
                 return .som.gray700
             }

SOOUM/SOOUM/DesignSystem/Components/SOMDialogController/SOMDialogViewController+Show.swift

@@ -14,6 +14,7 @@ extension SOMDialogViewController {
     static func show(
         title: String,
         message: String,
+        textAlignment: NSTextAlignment = .center,
         actions: [SOMDialogAction],
         dismissesWhenBackgroundTouched: Bool = false,
         completion: ((SOMDialogViewController) -> Void)? = nil
@@ -24,6 +25,7 @@ extension SOMDialogViewController {
             let dialogViewController = SOMDialogViewController(
                 title: title,
                 message: message,
+                textAlignment: textAlignment,
                 completion: { alertController in
                     window.windowScene = nil
                     completion?(alertController)
@@ -40,6 +42,7 @@ extension SOMDialogViewController {
     static func show(
         title: String,
         messageView: UIView,
+        textAlignment: NSTextAlignment = .center,
         actions: [SOMDialogAction],
         dismissesWhenBackgroundTouched: Bool = false,
         completion: ((SOMDialogViewController) -> Void)? = nil
@@ -50,6 +53,7 @@ extension SOMDialogViewController {
             let dialogViewController = SOMDialogViewController(
                 title: title,
                 messageView: messageView,
+                textAlignment: textAlignment,
                 completion: { alertController in
                     window.windowScene = nil
                     completion?(alertController)