AWS Cognito - 4) 로그인 UI와 필요한 위젯 블루프린트 생성

- 개요

로그인 UI에 필요한 로직을 추가하고

로그인 관련 페이지 UI 클래스를 바탕으로 위젯 블루프린트를 생성한다

 

- 스크립트 작업

1) SignInOverlay 클래스

 

UWidgetSwitcher 클래스에 대한 멤버변수를 추가한다

해당 클래스를 통해 인덱스를 사용하여 여러 개의 위젯 중에서 한 번에 하나의 위젯만 화면에 노출시킬 수 있다

 

 

회원가입 UI와 관련된 멤버변수들도 추가한다

각각 로그인 UI + 회원가입 UI + 회원인증 UI + 가입 완료 UI와 관련된 멤버변수이다

또한 각각의 UI와 관련된 콜백함수를 호출할 버튼 UI들도 추가한다

 

 

추가한 버튼 멤버변수들에 연결할 콜백함수들을 추가한다

 

 

NativeConstruct 함수에 위와 같이 로직을 추가한다

추가한 버튼 멤버변수들이 유효한지 확인한 후에 적합한 콜백 함수들을 버튼에 각각 연결한다

 

 

콜백함수들의 로직은 위와 같다

WidgetSwitcher 멤버변수를 사용하여 적합한 UI를 화면에 띄운다

 

- 애셋 작업

1) WBP_SignInPage 위젯 블루프린트

로그인 UI의 계층과 실제 이미지

 

SignInPage 클래스를 기반으로 위와 같이 위젯 블루프린트를 생성하였다

해당 위젯 블루프린트를 통해 로그인을 진행한다

 

2) WBP_SiginUpPage 위젯 블루프린트

회원가입 UI의 계층과 실제 이미지

 

SignUpPage 클래스를 기반으로 위와 같이 위젯 블루프린트를 생성하였다

해당 위젯 블루프린트를 통해 회원가입을 진행한다

 

3) WBP_ConfirmSignUpPage 위젯 블루프린트

회원인증 UI의 계층과 실제 이미지

 

ConfirmSignUpPage 클래스를 기반으로 위와 같이 위젯 블루프린트를 생성한다

해당 위젯 블루프린트를 통해 회원인증을 진행한다

 

4) WBP_SuccessConfirmed 위젯 블루프린트

가입 완료 UI의 계층과 실제 이미지

 

SuccessConfirmedPage 클래스를 기반으로 위와 같이 위젯 블루프린트를 생성한다

해당 위젯 블루프린트를 통해 가입 완료를 진행한다

 

5) WBP_SignInOverlay 위젯 블루프린트

로그인 총괄 UI의 계층과 실제 이미지

 

SignOverlay 클래스를 바탕으로 위와 같이 위젯 블루프린트를 생성한다

해당 위젯 블루프린트를 통해 로그인 및 유저 풀과 관련된 여러 동작을 수행한다

WidgetSwitcher 아래에 여러개의 자식 오브젝트를 추가하고 인덱스를 통해 자식 오브젝트를 관리한다

 

- 최종 실행 결과