함께메뉴결정 탭 및 혼밥메뉴결정 탭의 미니게임 준비 화면을 보여줍니다.

[just1103]

배경

• 본격적으로 미니게임을 시작하기 전에 사용자가 게임을 준비할 수 있도록 유도합니다.
• 함께메뉴결정 탭의 경우, 사용자들을 그룹핑하여 추후 미니게임 결과를 합산하게 됩니다. 그룹만들기 버튼을 탭한 사용자가 해당 그룹의 Host가 되고, 공유하기 버튼을 통해 ActivityView를 띄우고 팀원들에게 간편하게 PIN 번호를 공유할 수 있습니다. Host가 아닌 팀원들은 PIN으로 입장하기 버튼을 탭하여 PIN 번호를 입력하고 그룹에 입장할 수 있습니다.
• 혼밥메뉴결정 탭의 경우, 미니게임을 혼자서 진행하므로 위 과정이 필요 없습니다. 미니게임 시작 버튼을 누르면 게임이 시작됩니다.

작업 내용

1. 혼밥메뉴결정, 함께메뉴결정 탭 추가

flowCoordinator를 통해 각 탭에 해당하는 ViewController를 생성한 후 MainTabBarController의 pages로 주입시켰습니다.

2. ActivityView 내용 커스텀

ActivityView를 통해 PIN 번호를 공유할 때 Title과 Content를 커스텀하기 위해 UIActivityItemSource를 준수하는 SharePinNumberActivityItemSource를 구현했습니다.

• activityViewControllerPlaceholderItem(:) : 데이터의 PlaceHolder 객체를 반환 (필수 구현)
• activityViewController(:itemForActivityType:) : 작업을 수행할 데이터 객체를 반환 (필수 구현)
• activityViewController(:subjectForActivityType:) : Activity의 제목을 지원하는 경우, 이를 반환
• activityViewControllerLinkMetadata(:) : MetaData를 통해 ActivityView에 띄울 컨텐츠를 지정 후 이를 반환

ActivityView를 화면에 띄울 때에는, Rx를 활용하여 공유하기 버튼을 눌렀을 경우 화면에 present할 수 있도록 했습니다.
또한 아이패드의 지원을 위해 다음과 같은 코드를 추가했습니다.

activityViewController.popoverPresentationController?.sourceView = self?.shareButton
activityViewController.popoverPresentationController?.permittedArrowDirections = .down

ActivityView의 Title은 Host (PIN 번호를 공유하는 주체)가 확인할 수 있도록 "[우리뭐먹지] 팀원과 PIN 번호를 공유해보세요" 메세지를 나타내고, PIN 번호를 공유받는 팀원은 해당 앱을 실행하여 그룹에 입장할 수 있도록 "[우리뭐먹지] 팀원이 공유한 PIN 번호: 1111 / PIN 번호를 통해 입장하여 오늘의 메뉴를 골라보세요" 메세지를 나타냈습니다.

3. NavigationBar의 색상 변경

NavigationBar의 색상을 앱의 메인 색깔로 변경해주고자 했습니다.
초기에는 NavigationBar의 backgroundColor를 지정했을 때, 상단의 StatusBar 부분에는 색상이 적용되지 않는 문제가 발생했습니다.
따라서 View의 backgroundColor를 ColorPalette.mainYellow로 변경해주고, SubView인 StackView의 backgroundColor를 white로 설정하여 문제를 해결했습니다.

테스트 방법

• 실기기 테스트를 통해 ActivityView에서 다른 앱으로 공유하기 기능을 사용하고, 공유되는 텍스트를 확인합니다.

리뷰 노트

• ActivityView의 아이콘은 추후 앱 아이콘으로 변경할 예정입니다.
• 처음에는 PIN 번호 텍스트를 공유하는 것보다는, PIN 번호가 담긴 URL을 공유하여 팀원들이 해당 링크를 탭하면 즉시 앱을 실행하고 해당 그룹에 입장하도록 하는 기능이 UX 측면에서 유리할 것으로 판단했습니다. 하지만 앱을 다운받았으나 아직 실행하지 않았던 사용자는 OnboardingPage를 확인할 수 없고, 못먹는음식을 선택할 수 없다는 단점이 있어서 위 기능을 구현하지 않았습니다. 추후 보완이 가능하다면 위 기능을 구현하도록 변경할 수 있습니다.
• 레이아웃의 경우 추후 디자인이 변경될 것을 고려하여 형태만 잡아놓았습니다.

스크린샷