✨ 계정 찾기 플로우 UI 구현

🔍 개요

close #103

📝 작업사항

[x] 전화번호 입력 화면 UI, VM 구현
[x] 인증번호 입력 화면 UI, VM 구현
[x] 계정 확인 화면 UI, VM 구현
[x] SplashViewController -> rootViewController 제외
[x] Coordinator관련 프로토콜 -> Utility로 이동
[x] 로그인 버튼 재사용을 위해 수정

📸 스크린샷 또는 영상

https://github.com/Team-JubJub/ZupZup-iOS/assets/81943525/299b48c1-1286-4681-8900-1357a9fc8da3

🧐 참고 사항

1. Popable, PopToRoot, Dismissable -> Utility로 이동

원래 FeatureMain/HomeCoordinator에 있던 위의 3개의 프로토콜을 Utility/Coordinator로 이동시켰습니다. 이유는 AuthCoordinator에서 사용해야하기 때문입니다.

2. LaunchScreenViewController -> Coodinating 작업

위의 화면에서 '로그인하러 가기' 버튼을 눌렀을 때, rootView로 가야하는데,
이전까지는 rootView가 LaunchScreenView였기에, 다시 스플래쉬가 보여지는 버그가 있었습니다.

위의 문제를 해결하기 위해, 크게 2가지의 작업을 했습니다. 첫번째로는 SceneDelegate에서 메소드를 분리했습니다.

아래는 SceneDelegate와 2개의 메소드입니다. rxswift를 사용해 2초후에 AuthCoordinator가 시작되도록 구현했습니다.

SceneDelegate.swift

func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
        guard let scene = (scene as? UIWindowScene) else { return }
        let window = UIWindow(windowScene: scene)
        window.backgroundColor = .white

        coordinator = AppCoordinator(window: window)
        coordinator?.splash() // 스플래쉬 메소드
        coordinator?.start() // 메인 화면전환 메소드
    }

func splash() {
        let viewController = LaunchScreenViewController()
        self.navigationController.setViewControllers([viewController], animated: false)
        window.rootViewController = navigationController
        window.makeKeyAndVisible()
    }

func start() {
    let coordinator = AuthCoordinator(window: self.window)

    Observable<Int>.timer(RxTimeInterval.seconds(2), scheduler: MainScheduler.instance)
        .subscribe(onNext: { _ in
             coordinator.start()
        })
        .disposed(by: disposeBag)
    }

AuthCoordinator의 start() 가 실행되고 난 후 상황입니다.

public final class AuthCoordinator {

    public var navigationController = UINavigationController() // 네이게이션 초기화

    let window: UIWindow

    public init(window: UIWindow) {
        self.window = window
    }

    public func start() {
        let viewModel = SocialLoginViewModel()
        let viewController = SocialLoginViewController(
            coordinator: self,
            viewModel: viewModel
        )

        self.window.rootViewController = navigationController
        self.navigationController.pushViewController(viewController, animated: true)
    }
}

주목할 점은 기존의 window의 navigationController를 버리고, 새로운 인스턴스를 생성했습니다. 이전에는 naviagtionController를 init함수에서 받아왔는데, 그러면 이전 상태 (즉, 런치스크린이 루트가 되는)의 네비게이션 스택에, 소셜로그인 뷰를 푸쉬하는 것이기에, 새로운 네비게이션으로 교체하도록 했습니다.

3. 로그인 버튼 수정

위의 화면의 3가지 로그인 컴포넌트를 재사용하고 싶어서 DesignSystem/LoginButton을 수정했습니다.

LoginButton.swift

public class LoginButton: UIButton {

    private var type: ButtonType // 버튼의 종류 -> 구글, 애플, 카카오
    private var mode: Mode // 로그인에서 쓰는지, 계정 찾기에서 사용하는지

// 중략

public enum Mode {
        case Login // 소셜로그인 화면에서 사용할 경우
        case Account // 내 계정찾기에서 사용할 경우
    }

private func configure(type: ButtonType) {
        switch type {
        case .google: // 3항 연산자를 통해 분기처리
            self.buttonLabel.text = (self.mode == .Login) ? "Google로 시작하기" : "Google"
            self.buttonLabel.textColor = .designSystem(.black161516)
            self.buttonImageView.image = UIImage(.ic_google)
            self.backgroundColor = .designSystem(.whiteFFFFFF)
            self.layer.borderWidth = 1
            self.layer.borderColor = UIColor.designSystem(.neutral400)?.cgColor
        case .kakao:
            self.buttonLabel.text = (self.mode == .Login) ? "카카오로 시작하기" : "카카오"
            self.buttonLabel.textColor = .designSystem(.black161516)
            self.buttonImageView.image = UIImage(.ic_kakao)
            self.backgroundColor = .designSystem(.yellowFEE500)
        case .apple:
            self.buttonLabel.text = (self.mode == .Login) ? "Apple로 시작하기" : "Apple"
            self.buttonLabel.textColor = .designSystem(.whiteFFFFFF)
            self.buttonImageView.image = UIImage(.ic_apple)
            self.backgroundColor = .designSystem(.black161516)
        }
    }

마지막으로 위의 사진과 같이 회색으로 만들고 싶다면, 버튼 클래스 내부의 changeColor() 메소드를 호출하시면 됩니다.

// 버튼의 색상을 회색으로 바꾸기
// 사용방법
// private lazy var kakaoButton = LoginButton(type: .kakao, mode: .Account)
// btn.changeColor
//
public func changeColor() {
        self.backgroundColor = .designSystem(.neutral200)
        self.buttonLabel.textColor = .designSystem(.neutral400)
        switch type {
        case .google:
            self.buttonImageView.image = UIImage(.ic_google_off)
            self.layer.borderWidth = 0
        case .kakao:
            self.buttonImageView.image = UIImage(.ic_kakao_off)
        case .apple:
            self.buttonImageView.image = UIImage(.ic_apple_off)
        }
    }

📄 Reference

[]()

Team-JubJub / ZupZup-iOS