본문 바로가기
  • 개발공부 및 일상적인 내용을 작성하는 블로그 입니다.
프로젝트/협업

Pro.gg - 화면별 기능 : 메인 화면 및 회원 가입, 로그인

by 방구석 대학생 2022. 3. 23.

 

 

* 메인 화면

- 헤더 메뉴

1. 로그인 기능 : 우측 상단의 로그인 링크를 클릭하면 로그인 화면으로 이동할 수 있으며, 해당 화면에서 로그인을 하거나 회원가입 페이지로 넘어갈 수 있습니다.

2. 챔피언 정보, 팀 검색, 조건 별 회원 검색, 상대팀 찾기, 게시판 등의 각종 기능을 제공하는 페이지로 이동할 수 있습니다.

3. 소환사명을 검색하여 해당 소환사의 솔로 랭크, 자유 랭크 정보와 최근 전적 기록을 살펴 볼 수 있으며, 사이트에 가입되어 있는 회원의 닉네임으로 검색 하였을 때 해당 회원에게 소환사 정보가 등록되어 있을 경우, 등록된 소환사 솔로 랭크, 자유 랭크 정보와 최근 전적을 확인할 수 있습니다.

 

- 소환사 명 검색 결과 예시

 

- 회원 닉네임 검색 결과 예시

회원의 닉네임과 등록된 소환사명이 함께 표시 됩니다.

 

 

* 회원 정보 관리기능

- 로그인 페이지

1. 정확한 아이디, 비밀번호를 입력하고 로그인 버튼을 누르면 로그인 할 수 있습니다, 아이디, 비밀번호가 정확하지 못 한 경우 로그인 할 수 없습니다.

2. 각종 SNS 로그인 기능을 이용할 수 있습니다. (네이버, 카카오, 페이스북, 구글)

3. 아이디가 없을 경우 회원가입 링크를 통해 약관 동의 페이지 및 회원 가입 페이지로 넘어갈 수 있습니다.

 

- 약관 동의 페이지

1. 회원 가입 링크를 누를 경우 약관 동의 페이지가 출력 됩니다.

2. 각종 약관에 동의 한 후 동의 버튼을 누르면 회원 가입 페이지로 이동하고, 동의 안 함 버튼을 누를 경우 '동의하지 않으면 가입할 수 없습니다.' 라는 경고창과 함께 약관 동의 페이지가 닫힙니다.

만약 약관 동의 체크 박스를 클릭하지 않은 체 동의 버튼을 누르면 '필수 약관에 동의 하셔야 합니다.' 라는 경고창을 출력합니다.

 

- 회원 가입 페이지

1. 각종 입력한 정보들이 일련의 규칙에 위배되지 않는 경우 회원 가입할 수 있습니다.

2. 중복된 아이디 또는 닉네임이 존재하거나, 숫자, 특문 각 1개 미만, 영문 2개 미만, 최대 8자리 미만으로 비밀번호를 작성하거나, 비밀번호 규칙을 모두 지켜도 비밀번호 확인 란에 작성한 비밀번호가 일치하지 않는 경우 가입하기 버튼이 비활성화 됩니다.

3. 취소 버튼을 누를 경우 메인 화면으로 돌아갑니다.

 

- 회원 가입 및 로그인 성공

1. 로그인에 성공할 경우 우측 상단의 닉네임이 출력되고, 해당 닉네임 영역의 링크를 클릭 시 마이페이지, 로그아웃 기능을 제공하는 드롭다운 UI 가 출력됩니다.

2. Aside 영역엔 닉네임이 기본으로 출력되고, 소환사 명이 등록되어 있을 경우 등록된 소환사 명의 솔로 랭크 티어가 이미지로 출력되며, 그외 현재 솔로 랭크에서의 LP, 티어, 승패 전적, 승률에 대한 정보가 출력 됩니다.