[iOS] 로그인 & 회원가입 구현 #1 - 로그인, 형식 검사

참고 링크

스토리보드

---

Login View -> View Controller (로그인)
Login View -> Join View -> View Controller (회원가입)

loginView.swift

🎯 class UserModel

---

final class UserModel {
    struct User {
        var email: String
        var password: String
    }
    
    var users: [User] = [
        User(email: "abc1234@naver.com", password: "qwerty1234"),
        User(email: "dazzlynnnn@gmail.com", password: "asdfasdf5678")
    ]
    
    // 아이디 형식 검사
    func isValidEmail(id: String) -> Bool {
        let emailRegEx = "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
        let emailTest = NSPredicate(format: "SELF MATCHES %@", emailRegEx)
        return emailTest.evaluate(with: id)
    }
    
    // 비밀번호 형식 검사
    func isValidPassword(pwd: String) -> Bool {
        let passwordRegEx = "^[a-zA-Z0-9]{8,}$"
        let passwordTest = NSPredicate(format: "SELF MATCHES %@", passwordRegEx)
        return passwordTest.evaluate(with: pwd)
    }
} // end of UserModel

class UserModel에 User 구조체를 정의하고, 아이디(이메일) 형식과 비밀번호 형식을 검사하는 method를 정의했다.
형식 검사 참고 링크

이메일 정규식: "[A-Z0-9a-z._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,}"
-> @ 앞에 알파벳, 숫자, 특수문자가 포함될 수 있고 @ 뒤에는 알파벳, 숫자, 그리고 . 뒤에는 알파벳 2자리 이상

비밀번호 정규식: "^[a-zA-Z0-9]{8,}$"
-> 소문자, 대문자, 숫자 8자리 이상

🎯 class loginView

---

var userModel = UserModel() // 인스턴스 생성
    
@IBOutlet weak var emailTextField: UITextField!
@IBOutlet weak var passwordTextField: UITextField!
@IBOutlet weak var loginButton: UIButton!
   
    
// 로그인 method
func loginCheck(id: String, pwd: String) -> Bool {
    for user in userModel.users {
        if user.email == id && user.password == pwd {
            return true // 로그인 성공
        }
    }
    return false
}

email과 password가 저장되어 있으면 로그인 성공

---

// TextField 흔들기 애니메이션
func shakeTextField(textField: UITextField) -> Void{
    UIView.animate(withDuration: 0.2, animations: {
        textField.frame.origin.x -= 10
    }, completion: { _ in
        UIView.animate(withDuration: 0.2, animations: {
            textField.frame.origin.x += 20
         }, completion: { _ in
             UIView.animate(withDuration: 0.2, animations: {
                textField.frame.origin.x -= 10
            })
        })
    })
}
    
    
// 다음 누르면 입력창 넘어가기, 완료 누르면 키보드 내려가기
@objc func didEndOnExit(_ sender: UITextField) {
    if emailTextField.isFirstResponder {
        passwordTextField.becomeFirstResponder()
    }
}  

입력 틀렸을 때 TextField 흔들리게 하는 코드!! 너무 귀엽다 이거
그리고 키보드에서 다음 누르면 다음 입력창으로 넘어가게 하는 코드

---

override func viewDidLoad() {
    super.viewDidLoad()

    // 키보드 내리기
    emailTextField.addTarget(self, action: #selector(didEndOnExit), for: UIControl.Event.editingDidEndOnExit)
    passwordTextField.addTarget(self, action: #selector(didEndOnExit), for: UIControl.Event.editingDidEndOnExit)
    loginButton.addTarget(self, action: #selector(didEndOnExit), for: UIControl.Event.editingDidEndOnExit)
        
} // end of viewDidLoad
    
    
@IBAction func didTapLoginButton(_ sender: UIButton) {
    // 옵셔널 바인딩 & 예외 처리 : Textfield가 빈문자열이 아니고, nil이 아닐 때
    guard let email = emailTextField.text, !email.isEmpty else { return }
    guard let password = passwordTextField.text, !password.isEmpty else { return }
        
    if userModel.isValidEmail(id: email){
        if let removable = self.view.viewWithTag(100) {
            removable.removeFromSuperview()
        }
    }
    else {
        shakeTextField(textField: emailTextField)
        let emailLabel = UILabel(frame: CGRect(x: 68, y: 350, width: 279, height: 45))
        emailLabel.text = "이메일 형식을 확인해 주세요"
        emailLabel.textColor = UIColor.red
        emailLabel.tag = 100
            
        self.view.addSubview(emailLabel)
    } // 이메일 형식 오류
        
    if userModel.isValidPassword(pwd: password){
        if let removable = self.view.viewWithTag(101) {
            removable.removeFromSuperview()
        }
    }
    else{
        shakeTextField(textField: passwordTextField)
        let passwordLabel = UILabel(frame: CGRect(x: 68, y: 435, width: 279, height: 45))
        passwordLabel.text = "비밀번호 형식을 확인해 주세요"
        passwordLabel.textColor = UIColor.red
        passwordLabel.tag = 101
            
        self.view.addSubview(passwordLabel)
    } // 비밀번호 형식 오류
        
    if userModel.isValidEmail(id: email) && userModel.isValidPassword(pwd: password) {
        let loginSuccess: Bool = loginCheck(id: email, pwd: password)
        if loginSuccess {
            print("로그인 성공")
            if let removable = self.view.viewWithTag(102) {
                removable.removeFromSuperview()
            }
            self.performSegue(withIdentifier: "showMain", sender: self)
        }
        else {
            print("로그인 실패")
            shakeTextField(textField: emailTextField)
            shakeTextField(textField: passwordTextField)
            let loginFailLabel = UILabel(frame: CGRect(x: 68, y: 510, width: 279, height: 45))
            loginFailLabel.text = "아이디나 비밀번호가 다릅니다."
            loginFailLabel.textColor = UIColor.red
            loginFailLabel.tag = 102
                
            self.view.addSubview(loginFailLabel)
        }
    }
} // end of didTapLoginButton

오토레이아웃을 안 넣어서 아직 얼러트 문구 뜨는 위치는 애매하지만... 일단은 구현 성공