Access Tokens - 5) 대시보드의 구성

- 개요

로그인 후에 사용자가 마주할 대시보드 화면을 구성한다

대시보드는 다음과 같이 구성된다

• 진행중인 게임에 참여할 수 있는 Game 버튼
• 게임과 관련된 유저의 기록을 확인할 수 있는 Career 버튼
• 유저들의 순위를 보여주는 LeaderBoard 버튼

 

각각의 버튼을 통해 적합한 UI를 팝업시키고,

UI간의 전환은 WidgetSwitcher를 사용하여 수행한다

 

- 스크립트 작업

1) 대시보드 페이지 UI 클래스 

리더보드 페이지 UI

 

게임 페이지 UI

 

Career 페이지 UI

 

위와 같이 대시보드를 통해 보여줄 3개의 페이지에 대한 UI 클래스를 추가한다

 

2) DashboardOverlay 클래스

 

위와 같이 멤버변수를 구성한다

각각의 멤버변수에는 "meta = (BindWidget)" 속성을 추가하여 변수와 실제 위젯을 연결한다

• WidgetSwitcher 멤버변수 : 페이지 위젯들을 전환하는 역할
• 사용할 페이지 위젯들과 해당 위젯들을 활성화할 버튼 멤버변수

 

 

위와 같이 멤버함수들을 구성한다

NativeConstruct 함수에서 필요한 구성과 설정을 진행한다

나머지 3개의 함수들은 버튼 멤버변수에 연결한다

 

 

3개의 버튼 멤버변수에 바인드될 함수들을 위와 같이 구성한다

연결된 페이지 UI들을 활성화한다

 

 

NativeConstruct 함수를 위와 같이 구성하여 버튼 멤버변수들에 콜백 함수를 연결한다

이후 기본적으로 Game 페이지 UI를 활성화하도록 설정한다

 

3) HUDManagement 인터페이스

 

HUDManagement 인터페이스를 추가하여 HUD 클래스와 Portal 중재자간의 의존관계를 제거한다

OnSign 순수가상함수를 추가하여 자식 클래스에서 오버라이드한다

 

4) PortalHUD 클래스

 

상속관계에 HUDManagement 인터페이스를 상속받도록 추가한다

 

 

멤버변수를 위와 같이 추가하고 OnSign 함수를 오버라이드한다

• DashboardOverlayClass 멤버변수 : DashboardOverlay 클래스의 서브 클래스의 타입을 지정
• DashboardOverlay 멤버변수 : DashboardOverlayClass 값을 바탕으로 생성된 객체를 지정

 

 

OnSignIn 함수의 로직을 위와 같이 구성한다

이전에 존재하는 회원가입 UI를 제거하고 대시보드 UI를 뷰포트에 추가한다

 

5) PortalManager 클래스

 

SignIn_Response 함수에 위와 같이 로직을 추가하여

토큰이 재발급된 이후에 PlayerController를 통해 HUD를 가져오고 OnSign 함수를 호출한다

따라서 로그인한 사용자에게 대시보드 UI가 표시된다

 

- 블루프린트 작업

1) 대시보드 페이지 UI의 위젯 블루프린트

Career 페이지의 위젯 블루프린트

 

위와 같이 대시보드 페이지의 위젯 블루프린트를 간단하게 구성한다

 

2) WBP_DashboardOverlay 위젯 블루프린트

 

위와 같이 멤버변수의 이름과 동일하게 하위 위젯의 이름을 설정한다

또, 3개의 버튼과 WidgetSwitcher를 통해 각각의 대시보드 페이지 위젯을 활성화한다

 

3) BP_PortalHUD 블루프린트

 

DashboardOverlay Class 멤버변수의 값을 설정한다

 

- 최종 실행 결과