티스토리 뷰

저번 포스팅에 이어서..

휴대폰 번호 전송버튼을 클릭했을 때, 조건을 파악해서 액션을 주고 싶다

 

생각해본 조건은 간단히 숫자로만 구성된 10,11자리 이어야 하는데 이것은 description을 체크할 때 그대로 했던 작업이다

코드 반복을 피하고 함수로 따로 빼내고 싶지만 현재 이 회원가입페이지를 너무 오래 붙잡고 있기도 하고.. 해서 일단은 그냥 복붙형태로 진행하려 한다

 

... 이렇게 해도 되냐고 물어보았는데 안될 건 없지만 코드리뷰할 때.... ㅠㅠ(생략) 

 

아무튼...

 

버튼을 눌렀을 때 alert 띄우기

일단 alert 띄울 때 필요한 함수를 아래와 같이 입력해주자

입력할 곳은 IBAction 을 입력하는 곳에 넣어주면 된다

    func wrongPhoneNumberAlert() {
        let alert = UIAlertController(title: "알림", message: "올바르지 않은 휴대폰 번호 형식입니다.", preferredStyle: .alert)
            let check = UIAlertAction(title: "확인", style: .destructive, handler: nil)
            alert.addAction(check)
            present(alert, animated: true, completion: nil)
        }

wrongPhoneNumberAlert() 따로 만들었으니 phoneNumberButtonClicked Action을 아래와 같이 바꿔주자

    @IBAction func phoneNumberButtonClicked(_ sender: UIButton) {
        let rightNumberCount = [10, 11]
        let convertDigit = phoneNumberTextField.text!.replacingOccurrences(of: #"\D"#, with: "", options: .regularExpression)
        if rightNumberCount.contains(convertDigit.count) {
            phoneNumberView.isHidden = false
            phoneNumberButton.setTitle("재전송", for: .normal)
        } else {
            wrongPhoneNumberAlert()
        }
    }

10, 11자리의 숫자일 때에만 Lable을 숨겨주고 UIButton의 title을 "재전송"으로 바꿔준다

그렇지 않을 경우에는 alert을 띄워준다

 

휴대폰 인증번호가 전송됐다고 가정하고, 인증번호의 인증버튼을 눌렀을 때 기능을 계속해서 만들어보자

인증번호 전송버튼은 label을 판단하는 조건을 똑같이 만들고 alert를 실행하거나 인증버튼 view를 보여주었는데,

이번에는 임의의 숫자 123456를 UserDefaults(로컬데이터)에 입력해놓고 123456이라는 숫자를 입력했을 때만 인증완료를 시키고 틀리면 alert를 띄워보려고 한다

 

일단 인증버튼의 Outlet을 만들어서 connect 해주고, IBAction도 만들어서 connect 해주자

 

UserDefault(로컬데이터)에 값 저장하고 불러오기

로컬데이터를 불러와서 사용자가 입력한 숫자와 대조하려면 일단 저장해야하는데 저장하는 순간을 여기에서는 그냥 임의로 인증번호를 전송하는 순간으로 하겠다

phoneNumberButtonClicked 함수 내의 올바른 경우에서 아래와 같은 코드를 한줄 더 추가해주자

            UserDefaults.standard.set("123456", forKey: "userPassword")

사용자가 올바른 전화번호를 입력한후 전송 버튼을 눌렀을 때 userPassword라는 key로 "123456" 라는 String 값이 저장된 것이다

 

여기에서도 alert 함수가 재사용 되는데 안의 메시지는 수정이 조금 필요해서 wrongPhoneNumberAlert 함수명, 함수내용과 phoneNumberButtonClicked 내에서의 함수 호출을 아래와 같이 변경해주겠다

    func wrongCaseAlert(title: String, message: String) {
        let alert = UIAlertController(title: title, message: message, preferredStyle: .alert)
            let check = UIAlertAction(title: "확인", style: .destructive, handler: nil)
            alert.addAction(check)
            present(alert, animated: true, completion: nil)
        }

 

            wrongCaseAlert(title: "알림", message: "올바르지 않은 휴대폰 번호입니다")

함수명을 변경해주고 매개변수를 설정해줌으로써 재사용하기 쉽도록 해주었다

 

인증버튼의 IBAction 함수는 아래와 같이 써주었다

@IBAction func phoneNumberCheckButtonClicked(_ sender: UIButton) {
        let text = phoneNumberCheckTextField.text!
        if text.count != 6  {
            wrongCaseAlert(title: "알림", message: "인증번호는 6자리 숫자입니다")
        } else if text == UserDefaults.standard.string(forKey: "userPassword") {
            phoneNumberCheckButton.setTitle("인증완료", for: .normal)
            phoneNumberCheckButton.isEnabled = false
            phoneNumberCheckTextField.isEnabled = false
        } else {
            wrongCaseAlert(title: "알림", message: "올바르지 않은 인증번호 입니다")
        }
    }

입력한 것이 6자리가 아니면 인증번호가 6자리라는 알림을 띄워주고

6자리인 경우에서 입력한 값이 UserDefault의 "userPassword"라는 key로 불러온 value("123456")와 비교해서 맞을 때에는 버튼을 "인증완료"로 바꿔주고 버튼과 Text Field를 더 이상 누를 수 없도록 비활성화 해준다

6자리이나 인증되지 않은 경우는 alert를 띄워준다

인증번호를 6글자가 아닌 경우
잘못된 인증번호를 입력한 경우
저장된 "123456"을 입력한 후 Text Field와 Button 비활성화

 

 

+ 비밀번호의 placeholder에 "알파벳, 숫자, 특수문자 필수 8-16자"를 입력해줌

 

 

다음 포스팅에서는 전체선택 버튼을 선택했을 때 tag를 사용해서 한번에 체크를 해주고 풀어주고, 각각 체크를 해주고 풀어주는 기능을 만들어볼 것이다..

 

한페이지 너무 오래걸려...

너무 많은걸 넣었어...

 

댓글