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

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

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

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

로그인 , 회원가입 이용자 알럿 설정

이제 이용자에게 로그인 및 회원가입 시 각각 상황에 맞는 알럿이 뜰 수 있도록 구현해보려고 한다. 먼저 알럿을 구현하는 함수를 만들어 구성했다.

func showAlert(message: String) {
    let alert = UIAlertController(title: "알림", message: message, preferredStyle: .alert)
    let okAction = UIAlertAction(title: "확인", style: .default, handler: nil)
    alert.addAction(okAction)
    present(alert, animated: true, completion: nil)
}

각 상황별에 맞게 메시지를 넣어줄 수 있도록 하기 위해 이런식으로 구현했고 각각 원하는 메시지만 넣으면 바로 알럿 컨트롤러가 구현될 수 있도록 했다.

showAlert(message: "이메일 또는 패스워드가\\n일치하지 않습니다.")
showAlert(message: "저장된 회원정보가 없습니다.")

이렇게 원하는 메시지를 넣어 구현하면 각 상황별에 맞게 이렇게 알람이 뜨게된다!

 

CATransition 이란?

로그인 성공 시 영화 메인 페이지로 이동되는 커스텀 애니메이션 방법에 대해서 알아보자!

• Core Animation Transition은 단어 그대로 UIKit 보다 더 낮은 레벨인 Core Animation의 한 종류이며 특정 값을 세팅하여 transition 애니메이션을 커스텀 할 수 있는 인스턴스
• UIView가 가지고 있는 layer의 add(_:forKey:)에 추가하여 애니메이션 커스텀이 가능

open class CALayer : NSObject, NSSecureCoding, CAMediaTiming {
    open func add(_ anim: CAAnimation, forKey key: String?)
}

CATransition 에서 제공하는 프로퍼티를 확인해보면

• fade : 흐려지는 효과
• moveIn : 기존 콘텐츠 위에 새로운 콘텐츠가 덮이는 형태
• push : 새로운 콘텐츠가 기존 콘텐츠를 밀면서 전환
• reveal : subtype에 의해 지정된 방법으로 점진적 등장하는 형태

CATransition 활용해 로그인 성공 시 영화 목록 페이지로 이동

위에 커스텀 애니메이션을 통해 화면을 전환할 수 있도록 구현해보자 🙂

// 커스텀 전환 애니메이션 적용
let transition = CATransition()
transition.duration = 0.4
transition.type = CATransitionType.push
transition.subtype = CATransitionSubtype.fromRight
view.window?.layer.add(transition, forKey: kCATransition)

이렇게 하면 기존에 있던 로그인 화면을 밀고 영화 목록 리스트가 등장하게 된다!

 

원하는 화면 전환 애니메이션이 있다면 CATransition을 활용해 보자!

 

영화 검색 페이지를 위해 가져온 API 데이터 합치기

func fetchCombinedMovies(completion: @escaping (Swift.Result<(popular: Data, topRated: Data, upcoming: Data), Error>) -> Void) {
    let dispatchGroup = DispatchGroup()

    var popularMoviesData: Data?
    var topRatedMoviesData: Data?
    var upcomingMoviesData: Data?
    var error: Error?

    // Fetch popular movies
    dispatchGroup.enter()
    fetchPopularMovies { result in
        defer { dispatchGroup.leave() }
        switch result {
        case .success(let data):
            popularMoviesData = data
        case .failure(let err):
            error = err
        }
    }

    // Fetch top rated movies
    dispatchGroup.enter()
    fetchTopRatedMovies { result in
        defer { dispatchGroup.leave() }
        switch result {
        case .success(let data):
            topRatedMoviesData = data
        case .failure(let err):
            error = err
        }
    }

    // Fetch upcoming movies
    dispatchGroup.enter()
    fetchUpComingMovies { result in
        defer { dispatchGroup.leave() }
        switch result {
        case .success(let data):
            upcomingMoviesData = data
        case .failure(let err):
            error = err
        }
    }

    // Notify when all requests are completed
    dispatchGroup.notify(queue: .main) {
        if let error = error {
            completion(.failure(error))
        } else if let popularData = popularMoviesData, let topRatedData = topRatedMoviesData, let upcomingData = upcomingMoviesData {
            completion(.success((popular: popularData, topRated: topRatedData, upcoming: upcomingData)))
        }
    }
}

영화 검색 페이지를 만들어 원하는 영화를 검색할 수 있도록 구현할 예정인데 검색 할때는 각각 따로 구성된 API 데이터가 아닌, 들어온 모든 영화 데이터를 대상으로 검색하고 싶어 별도의 네트워크 메소드를 만들어 주었다.

 

이렇게 구현하면 오늘은 여기까지!

 

내일은 프로젝트를 전부 마무리할 수 있도록 구현할 예정이다.

• 자동로그인 기능, 로그아웃 기능
• 디자인 디테일 수정
• 영화 검색 페이지 구현 완료 (서치바, 컬렉션뷰)