🔀 :: (#357) 회원가입 화면 디자인패턴을 TCA로 변경합니다.

Application/Project.swift

@@ -32,6 +32,7 @@ let project = Project(
                 .Service.UserService,
                 .SPM.FirebaseMessaging,
                 .SPM.SemicolonDesign,
+                .SPM.ComposableArchitecture,
                 .target(name: "XquareWidget")
             ] + TargetDependency.universalDependencies,
             settings: .settings(base: ["OTHER_LDFLAGS": "-ObjC"])

Application/Sources/Application/AppDependency.swift

@@ -3,9 +3,11 @@ import Foundation
 import AuthService
 import MealDataService
 import UserService
+import ComposableArchitecture
 
 struct AppDependency {
     let launchScreenView: LaunchScreenView
+    let signupView: SignupView
 }
 
 // swiftlint:disable function_body_length
@@ -28,8 +30,10 @@ extension AppDependency {
         let loginViewModel = LoginViewModel(
             signInUseCase: authServiceDependency.signinUseCase
         )
-        let signupViewModel = SignupViewModel(
-            signupUseCase: authServiceDependency.signupUseCase
+        let signupStore = Store(
+            initialState: SignupState(),
+            reducer: SignupReducer.reducer,
+            environment: SignupEnvironment(signupUseCase: authServiceDependency.signupUseCase)
         )
         let launchScreenViewModel = LaunchScreenViewModel(
             refreshTokenUseCase: authServiceDependency.refreshTokenUseCase
@@ -61,7 +65,7 @@ extension AppDependency {
             mainView: mainView
         )
         let signupView = SignupView(
-            viewModel: signupViewModel,
+            store: signupStore,
             loginView: loginView
         )
         let onboardingView = OnboardingView(
@@ -75,7 +79,8 @@ extension AppDependency {
         )
 
         return AppDependency(
-            launchScreenView: launchScreenView
+            launchScreenView: launchScreenView,
+            signupView: signupView
         )
 
     }

Application/Sources/Scene/Signup/SignupAction.swift

@@ -0,0 +1,16 @@
+import Foundation
+
+import AuthService
+import ComposableArchitecture
+
+enum SignupAction {
+    case signup
+    case signupIsSuccess(Result<Void, AuthServiceError>)
+    case checkPasswordIsEqual
+    case checkButtonDisabled
+    case binding(BindingAction<SignupState>)
+    case authCodeChanged(String)
+    case idChanged(String)
+    case passwordChanged(String)
+    case reEnterPasswordChange(String)
+}

Application/Sources/Scene/Signup/SignupEnvironment.swift

@@ -0,0 +1,7 @@
+import Foundation
+
+import AuthService
+
+struct SignupEnvironment {
+    let signupUseCase: SignupUseCase
+}

Application/Sources/Scene/Signup/SignupReducer.swift

@@ -0,0 +1,79 @@
+import Foundation
+
+import AuthService
+import ComposableArchitecture
+
+struct SignupReducer {
+
+    static let reducer = AnyReducer<SignupState, SignupAction, SignupEnvironment> { state, action, environemnt in
+        switch action {
+        case .authCodeChanged(let authCode):
+            state.authCode = authCode
+            return .none
+        case .idChanged(let id):
+            state.id = id
+            return .none
+        case .passwordChanged(let password):
+            state.password = password
+            return .none
+        case .reEnterPasswordChange(let password):
+            state.reEnterPassword = password
+            return .none
+        case .signup:
+            return environemnt.signupUseCase.excute(data: .init(
+                authCode: state.authCode,
+                id: state.id,
+                profileImageUrl: nil,
+                password: state.password
+            ))
+            .catchToEffect(SignupAction.signupIsSuccess)
+            .eraseToEffect()
+        case .signupIsSuccess(.success(let success)):
+            state.isSuccess = true
+            return .none
+        case .signupIsSuccess(.failure(let error)):
+            if error == .duplicateId {
+                state.isSuccess = false
+                state.idErrorMessage = "아이디가 중복되었습니다."
+            } else if error == .networkNotWorking {
+                state.isInternetNotworking = true
+                state.isSuccess = false
+            }
+            return .none
+        case .checkPasswordIsEqual:
+            state.passwordErrorMessage = isPasswordEqual(
+                state.password,
+                state.reEnterPassword
+            ) ? "" : "비밀번호가 일치하지 않습니다."
+
+            return .none
+        case .checkButtonDisabled:
+            state.isDisable = !isPasswordEqual(
+                state.password,
+                state.reEnterPassword
+            ) || !checkId(state.id) || !checkAuthCode(state.authCode) || !checkPassword(state.password)
+            return .none
+        case .binding:
+            return .none
+        }
+    }
+
+    private static func isPasswordEqual(_ password: String, _ reEnterPassword: String) -> Bool {
+        return password == reEnterPassword
+    }
+    private static func checkId(_ id: String) -> Bool {
+        let strRegEx = "[A-Za-z0-9]{6,20}"
+        let pred = NSPredicate(format: "SELF MATCHES %@", strRegEx)
+
+        return pred.evaluate(with: id)
+    }
+    private static func checkPassword(_ password: String) -> Bool {
+        let strRegEx = "^(?=.*[A-Za-z])(?=.*[0-9])(?=.*[!@#$%^&*()_+=-]).{6,30}"
+        let pred = NSPredicate(format: "SELF MATCHES %@", strRegEx)
+
+        return pred.evaluate(with: password)
+    }
+    private static func checkAuthCode(_ authCode: String) -> Bool {
+        return authCode.count == 6
+    }
+}

Application/Sources/Scene/Signup/SignupState.swift

@@ -0,0 +1,13 @@
+import Foundation
+
+struct SignupState: Equatable {
+    var authCode: String = ""
+    var id: String = ""
+    var password: String = ""
+    var reEnterPassword: String = ""
+    var idErrorMessage: String = ""
+    var passwordErrorMessage: String = ""
+    var isSuccess: Bool = false
+    var isDisable: Bool = true
+    var isInternetNotworking: Bool = false
+}

Application/Sources/Scene/Signup/SignupView.swift

@@ -2,86 +2,108 @@ import SwiftUI
 
 import SemicolonDesign
 import AuthService
+import ComposableArchitecture
 
 struct SignupView: View {
 
-    @StateObject var viewModel: SignupViewModel
+    let store: Store<SignupState, SignupAction>
     var loginView: LoginView
 
     var body: some View {
-        NavigationView {
-            ZStack {
-                ScrollView {
-                    VStack(spacing: 20) {
-                        Spacer()
-                            .frame(height: 16)
-                        SDTextField(
-                            title: "인증코드",
-                            placeholder: "6자리를 입력해주세요",
-                            text: $viewModel.authCode
-                        )
-                        .padding(.horizontal, 16)
-                        .onChange(of: viewModel.authCode) { _ in
-                            viewModel.checkSignup()
-                        }
-                        SDTextField(
-                            title: "아이디",
-                            placeholder: "영문, 숫자 6~20자",
-                            text: $viewModel.id,
-                            errorMessage: viewModel.idErrorMessage
-                        )
-                        .padding(.horizontal, 16)
-                        .onChange(of: viewModel.id) { _ in
-                            viewModel.checkSignup()
-                        }
-                        SDTextField(
-                            title: "비밀번호",
-                            placeholder: "숫자, 영문, 특수문자 조합 최소 6자",
-                            text: $viewModel.password,
-                            isSecure: true
-                        )
-                        .padding(.horizontal, 16)
-                        .onChange(of: viewModel.password) { _ in
-                            viewModel.equalPasswordError()
-                            viewModel.checkSignup()
+        WithViewStore(self.store) { viewStore in
+            NavigationView {
+                ZStack {
+                    ScrollView {
+                        VStack(spacing: 20) {
+                            Spacer()
+                                .frame(height: 16)
+                            SDTextField(
+                                title: "인증코드",
+                                placeholder: "6자리를 입력해주세요",
+                                text: viewStore.binding(
+                                    get: \.authCode,
+                                    send: SignupAction.authCodeChanged
+                                )
+                            )
+                            .padding(.horizontal, 16)
+                            .onChange(of: viewStore.state.authCode) { _ in
+                                viewStore.send(.checkButtonDisabled)
+                            }
+                            SDTextField(
+                                title: "아이디",
+                                placeholder: "영문, 숫자 6~20자",
+                                text: viewStore.binding(
+                                    get: \.id,
+                                    send: SignupAction.idChanged
+                                ),
+                                errorMessage: viewStore.state.idErrorMessage
+                            )
+                            .padding(.horizontal, 16)
+                            .onChange(of: viewStore.state.id) { _ in
+                                viewStore.send(.checkButtonDisabled)
+                            }
+                            SDTextField(
+                                title: "비밀번호",
+                                placeholder: "숫자, 영문, 특수문자 조합 최소 6자",
+                                text: viewStore.binding(
+                                    get: \.password,
+                                    send: SignupAction.passwordChanged
+                                ),
+                                isSecure: true
+                            )
+                            .padding(.horizontal, 16)
+                            .onChange(of: viewStore.state.password) { _ in
+                                viewStore.send(.checkPasswordIsEqual)
+                                viewStore.send(.checkButtonDisabled)
+                            }
+                            SDTextField(
+                                title: "비밀번호 재입력",
+                                placeholder: "재입력",
+                                text: viewStore.binding(
+                                    get: \.reEnterPassword,
+                                    send: SignupAction.reEnterPasswordChange
+                                ),
+                                errorMessage: viewStore.state.passwordErrorMessage,
+                                isSecure: true
+                            )
+                            .padding(.horizontal, 16)
+                            .onChange(of: viewStore.state.reEnterPassword) { _ in
+                                viewStore.send(.checkPasswordIsEqual)
+                                viewStore.send(.checkButtonDisabled)
+                            }
+                            TermsCaptionView()
+                            Spacer().frame(height: 64)
                         }
-                        SDTextField(
-                            title: "비밀번호 재입력",
-                            placeholder: "재입력",
-                            text: $viewModel.reEnterPassword,
-                            errorMessage: viewModel.passwordErrorMessage,
-                            isSecure: true
+                    }
+                    VStack {
+                        Spacer()
+                        FillButton(
+                            isDisabled: viewStore.binding(
+                                get: \.isDisable,
+                                send: SignupAction.checkButtonDisabled
+                            ),
+                            text: "입력 완료",
+                            action: { viewStore.send(.signup) },
+                            type: .rounded
                         )
-                        .padding(.horizontal, 16)
-                        .onChange(of: viewModel.reEnterPassword) { _ in
-                            viewModel.equalPasswordError()
-                            viewModel.checkSignup()
+                        .fullScreenCover(isPresented: viewStore.binding(
+                            get: \.isSuccess,
+                            send: SignupAction.signup
+                        )) {
+                            loginView
                         }
-                        TermsCaptionView()
-                        Spacer().frame(height: 64)
-                    }
-                }
-                VStack {
-                    Spacer()
-                    FillButton(
-                        isDisabled: $viewModel.isDisabled,
-                        text: "입력 완료",
-                        action: {
-                            viewModel.signup()
-                        },
-                        type: .rounded
-                    )
-                    .fullScreenCover(isPresented: $viewModel.isSuccess) {
-                        loginView
                     }
                 }
+                .sdErrorAlert(isPresented: viewStore.binding(
+                    get: \.isInternetNotworking,
+                    send: SignupAction.signup
+                ), sdAlert: {
+                    SDErrorAlert(errerMessage: "네트워크가 원할하지 않습니다.")
+                })
+                .navigationTitle("회원가입")
+                .setNavigationBackButton()
             }
-            .sdErrorAlert(isPresented: $viewModel.isInternetNotWorking, sdAlert: {
-                SDErrorAlert(errerMessage: "네트워크가 원할하지 않습니다.")
-            })
-            .navigationTitle("회원가입")
-            .setNavigationBackButton()
+            .accentColor(.GrayScale.gray800)
         }
-        .accentColor(.GrayScale.gray800)
     }
 }