결과확인하기 버튼을 탭하면 게임결과 화면을 보여줍니다.

[just1103]

배경

• 팀원들/개인이 제출한 게임답변을 서버에 전달하고, 추천메뉴를 받아 보여주는 화면입니다.
• 총 3개 메뉴를 확인할 수 있고, 추천메뉴에 대해 다수의 팀원들이 원하는 키워드를 차례로 보여줍니다.

작업 내용

• Host가 결과확인하기 버튼을 탭하면, 팀원들의 화면에서 hidden 처리되었던 버튼을 보이도록 변경하여 팀원들도 추천메뉴를 확인할 수 있도록 했습니다.
• 결과대기 화면의 로직을 일부 수정했습니다.
  • 결과대기 화면에서 앱을 종료한 경우 재접속하면 해당 화면을 자동으로 보여주는 등 다양한 사용자 시나리오를 고려했습니다.
  • 결과대기 화면에서 게임다시시작하기 버튼을 탭한 경우, 해당 사용자의 제출 데이터를 삭제하도록 했습니다.
• Firebase를 통해 기기별 토큰을 받아 호스트를 서버에서 알 수 있도록 했습니다.
• 네트워크 연결상태를 확인하고, 인터넷이 불안정한 경우 사용자에게 알리도록 했습니다.
• Lottie를 통해 애니메이션을 추가했습니다.

1. 최종메뉴 처리

개인/팀 게임답변을 서버에서 POST 형태로 제출하고, 게임결과로 3개 메뉴와 총 참여인원수를 받아서 나타냈습니다. 사용자의 의사결정을 돕기 위해 다음메뉴보기 횟수를 3번으로 제한하였고, 다음메뉴보기 버튼을 탭하면 ViewModel로부터 다음 메뉴 정보를 받아와서 ViewController에서 메뉴이름과 해당 메뉴의 키워드를 수정하도록 했습니다.

서버의 효율성을 높이기 위해 서버개발자와 협의하여 게임결과를 제출할 때 (ResultSubmissionAPI, POST 메서드) 함께메뉴결정 탭이라면 response로 nil을 받고, 혼밥메뉴결정 탭이라면 게임결과를 받도록 구분했습니다. 이를 통해 혼밥메뉴결정은 별도의 게임결과 요청 API가 필요하지 않게 되었습니다.

2. 결과대기 화면에서 앱을 종료한 경우 재접속하면 해당 화면을 자동으로 띄우도록 구현

결과대기 화면에서 앱을 종료한 경우 TogetherGameSubmittedChecker를 통해 답변제출 여부와 가장 최근의 PIN Number를 UserDefault에 저장하도록 구현했습니다. 단순한 Bool타입과 Int타입인 만큼 UserDefault에 저장해도 문제가 없다고 판단했습니다.
게임을 제출했을 때 isTogetherGameSubmitted를 true로 바꾸고, 게임 시작하기 버튼을 눌렀을 때 / 게임 다시 시작 버튼을 눌렀을 때, 결과 확인 버튼을 눌렀을 때에는 false로 바꾸도록 했습니다.

앱을 종료 후 재실행했을 때에는 MainTabBarCoordinator에서 isSubmitted를 확인 후 true면 가장 최근에 제출했던 대기 화면이 보여지도록 했습니다.

func start() {
    makeMainTabBarPage()

    if TogetherGameSubmittedChecker.isSubmitted {
        guard let togetherCoordinator = childCoordinators.filter { $0.type == .togetherMenu }.first as? TogetherMenuCoordinator else {
            return
        }

        togetherCoordinator.showLatestSubmissionPage(pinNumber: TogetherGameSubmittedChecker.latestPinNumber)
    }
}

3. Firebase를 통해 기기별 토큰을 받아 Host를 서버에서 알 수 있도록 구현

Group으로 게임을 생성할 때 사용자의 토큰을 통해 서버에서 게임을 만든 Host가 누구인지 알 수 있도록 해야 했습니다. 따라서 FireBase를 연동했고 그 중 FirebaseMessaging을 사용했습니다. 토큰은 메모리에 올라가는 경우 앱이 종료될 때까지 메모리에서 해제되지 않도록 타입 프로퍼티로 선언했습니다.

토큰은 아래 메서드를 통해 받았습니다.

extension AppDelegate: MessagingDelegate {
    func messaging(_ messaging: Messaging, didReceiveRegistrationToken fcmToken: String?) {
        guard let fcmToken = fcmToken else { return }

        AppDelegate.token = fcmToken
    }
}

1. PIN Number 생성하기 버튼을 탭한 사용자를 서버에서 Host로 인식하도록 처리했습니다.
2. 결과대기 화면에서 호스트의 토큰과 기기의 토큰이 동일한지 비교하여 Bool 타입을 받도록 합니다.
3. 서버에서 받은 Bool 타입이 True인 경우 Host이므로 결과확인하기 버튼이 보이도록 합니다.
4. False인 경우 Host가 결과확인하기 버튼을 누를 때까지 버튼을 Hidden 처리합니다.

4. 네트워크 연결상태 확인

Network를 import하고, NetworkConnectionManager 타입을 싱글톤으로 구현했습니다. 각 화면에서 네트워크 연결상태를 확인하고, 이상이 있는 경우 오류화면을 나타내어 사용자가 인터넷에 재접속하도록 안내했습니다. 오류 화면에서 refresh 버튼을 누르면, 네트워크 연결 상태에 따라 다시 오류 화면을 보여주거나, Data를 Fetch하여 정상 화면이 보이도록 했습니다.
오류화면을 pop하면서 정상 화면을 보여주기 때문에 viewWillAppear를 사용해 화면이 다시 보이는 경우 데이터를 fetch해서 화면에 띄울 수 있도록 했습니다.

5. Lottie를 통해 애니메이션을 추가

Lottie 라이브러리를 Package에 추가하여 JSON 파일을 애니메이션으로 나타낼 수 있도록 했습니다. 게임시작준비 화면에서 Circle 애니메이션을 사용했고, 게임결과대기 화면에서 Loading 애니메이션을 활용하여 UX를 개선했습니다.
애니메이션을 위한 JSON 파일은 Asset을 통해 관리하고 있습니다.

테스트 방법

• 직접 서버에 연결하여 테스트 결과가 제대로 나오는지 확인했습니다.
• 실 기기에 연결해 Network 연결을 끄고 켜며 네트워크 연결 상태에 따라 적합한 View가 보이는지 확인했습니다.

리뷰 노트

• 앱출시 목표일정을 고려하여 주변 식당을 보여주는 기능 (지도 SDK), Notification 알림을 띄우는 기능 (Firebase)은 다음 배포 버전에서 추가하기로 했습니다.

스크린샷

결과대기 화면에서 앱 종료/재접속	혼밥메뉴결정 탭에서 추천메뉴 확인	함께메뉴결정 탭에서 팀원이 메뉴 확인