[ProJect 일지] 영화 예매 앱 만들기 (3)

2024.04.22 - [◽️ Programming/T I L] - [ProJect 일지] 영화 예매 앱 만들기 (1)

2024.04.23 - [◽️ Programming/T I L] - [ProJect 일지] 영화 예매 앱 만들기 (2)

영화 목록 페이지 컬렉션 뷰 , 홍보 이미지 추가

오늘은 영화 목록 페이지에 곧 개봉할 영화 API 데이터를 찾게 되어 하나 더 추가했고 좌석 정보를 전달하는 이미지를 넣어 조금 더 풍성하게 목록 페이지를 구성하였다.

이전에 API 가져오는 데이터 구성을 구현해두니 그 다음 내용이 추가되면 그대로 사용해 아주 편하게 API 데이터 연결이 가능했다.

 

이렇게 컬렉션 뷰 3개의 각자 다른 내용을 담고 있는 영화 정보를 넣고 이미지를 추가한 1차 완성본이 완료되었다.

 

로그인 페이지 구현

이제 목록 페이지를 완성했으니 다음엔 로그인 페이지를 만들어 보자!

 

로그인 페이지는 userdefults 를 사용해 데이터를 저장하고 그 데이터를 바탕으로 이메일과 비밀번호 입력 후 일치할 경우 로그인이 되는 과정과 틀렸을때 나오는 안내를 구현하고

 

로그인 정보가 없을땐 회원가입을 할 수 있도록 회원가입 페이지로 이동해 정보를 입력하고 그 입력된 정보를 userdefults에 저장해 로그인할때 사용할 수 있도록 설정했다.

자세히 하나하나 살펴보자

 

로그인 페이지 로직

먼저 로그인 페이지를 확인해보면 텍스트필드에 각각 맞는 데이터를 넣을 수 있도록 알맞은 placeholder를 넣어 이용자에게 안내할 수 있도록 했다.

loginIdTextField.placeholder = "이메일 주소를 입력하세요."
loginPasswordTextField.placeholder = "비밀번호를 입력하세요."
loginPasswordTextField.isSecureTextEntry = true

그리고 비밀번호를 입력했을때 비밀번호가 보이지 않고 * 로 표시될 수 있도록 isSecureTextEntry를 넣어 구현했다.

그 다음 로그인 버튼을 눌렀을때 입력되어있는 텍스트를 바탕으로 저장되어있는 정보를 확인 후 일치하면 로그인이 성공하고 실패하면 그에 맞는 알람이 전달될 수 있도록 구현했다.

@IBAction func loginToggleButton(_ sender: UIButton) {
    guard let email = loginIdTextField.text,
          let password = loginPasswordTextField.text else {
        
        //입력한 정보가 없거나 정보가 틀린경우 로직구현
        print("정보가 없거나 틀렸다.")
        return
    }
    
    guard let savedUserInfo = UserDefaults.standard.dictionary(forKey: "userInfo") else {
        // 저장된 회원가입 정보가 없는 경우 로직 구현
        print("회원 가입 정보가 없다.")
        return
    }
    
    if let savadPasswod = savedUserInfo[email] as? String, password == savadPasswod {
        // ** 로그인 성공해서 메인 영화 페이지로 이동하는 로직 구현 **
        print("로그인 성공")
    } else {
        // 정보가 맞지 않아 로그인 실패 로직
        print("이메일 또는 비밀번호가 올바르지 않다.")
    }
}

코드에서 확인되는 saved <<가 붙어있는 인스턴스들은 이 다음 회원가입에서 저장된 데이터가 담겨있다.

 

이렇게 로그인이 성공되면 이제 영화목록 페이지로 이동되도록 구현 후 로직 짜는것을 마무리 했다. 시간이 조금 더 주어진다면 이메일 형식이 아닐때 등등 여러 제약조건을 달아볼 예정이다.

 

로그인 페이지에서 더 구현될 내용은 이제 주석으로 표시된 부분의 내용을 이용자에게 알럿을 통해 알려주도록 구현할 예정이다.

 

그 다음 로그인 페이지에서 JOIN 버튼을 누르면 회원가입 페이지로 이동될 수 있도록 구현한 후 회원가입으로 넘어가보자!

@IBAction func joinToggleButton(_ sender: UIButton) {
    if let secondVC = storyboard?.instantiateViewController(withIdentifier: "secondVC") as? JoinViewController {
        secondVC.modalPresentationStyle = .formSheet
        present(secondVC, animated: true, completion: nil)
    }
}

회원가입 페이지 로직구현(UserDefaults)

그 다음 이제 로그인 정보가 없을때 새로운 정보를 저장할 수 있는 회원가입 페이지 로직을 살펴보자.

 

로그인 페이지와 마찬가지로 이용자에게 설명할 수 있고 비밀번호를 * 로 보이도록 기본 세팅을 해준 뒤

joinAddressTextField.placeholder = "이메일 주소를 입력하세요."
joinPasswordMainTextField.placeholder = "비밀번호를 입력하세요."
joinPasswordSubTextField.placeholder = "비밀번호를 동일하게 입력하세요."

joinPasswordMainTextField.isSecureTextEntry = true
joinPasswordSubTextField.isSecureTextEntry = true

회원가입을 위한 정보를 넣으면 그 정보를 체크하는 함수를 넣어준다.

guard let email = joinAddressTextField.text,
      let password = joinPasswordMainTextField.text else {
    return
}
guard password == joinPasswordSubTextField.text else {
    
    //일치하지 않을떄 여기 구현
    print("비밀번호가 일치하지 않습니다.")
    return
}

email , password를 넣었을 때 비밀번호를 한번 더 확인차 넣어야하는데 이 비밀번호가 가입할때 넣은 비밀번호와 동일할 수 있도록 설정하였고

var saveUserInfo = UserDefaults.standard.dictionary(forKey: "userInfo") ?? [:]

if saveUserInfo[email] != nil {
    print("이미 등록된 이메일")
    return
}
saveUserInfo[email] = password
UserDefaults.standard.set(saveUserInfo, forKey: "userInfo")

UserDefaults 를 활용해 이메일 패스워드를 적은 후 회원가입 버튼을 누르면 적혀있던 데이터가 “userInfo”에 저장될 수 있도록 구현하였다.

 

그리고 이미 UserDefaults에 있는 이메일이라면 이미 등록된 이메일이라는 알럿을 표시해 다른 이메일을 설정할 수 있도록 했다.

 

위에 처럼 정상적으로 데이터가 저장되어 회원가입이 완료되었다면 그 내용을 표시하고 이전 로그인 화면으로 돌아갈 수 있도록 구현하니 마무리 되었다 🙂

dismiss(animated: true)
    
    print("가입완료")
}

이렇게 오늘까지 한 내용이다! 내일은 세부 알럿을 구현해 완성한 후 서치바를 건드려볼 생각이다.