프로프리 Project Present

2022 여름 MadCamp 2분반 문동우, 이영준 팀

팀원

• KAIST 전산학부 문동우
• 성균관대 컴퓨터교육과 이영준

개발 환경

• OS: Android, ios (targetSdk: flutter.targetSdkVersion)
• Language: Kotlin, NodeJs, Mongodb
• IDE: Android Studio, Visual Studio Code

프로젝트 소개!

시작 화면: Login 및 회원가입

로그인 화면	이메일 회원가입	이메일 로그인	카카오 로그인

• 시작화면에서 로그인 창이 나오며 카카오 혹은 이메일을 통하여 로그인 및 회원가입을 할 수 있다.
• 카카오로 로그인을 누르면 권한 창이 나오며 로그인을 완료하여 홈 탭으로 들어갈 수 있다.
• Register as New Email User을 터치한다면 회원가입 창으로 넘어가며,
• 여기서 이름, 몰입캠프 수강시기, 분반, 이메일 등의 정보를 주어 회원가입을 하고, 로그인을 할 수 있다.

TAB 1: 홈

등록된 포스트 조회	개별 포스트 조회	새 포스트 업로드

• 홈 탭에서는 사용자들이 업로드한 프로젝트 홍보물들을 확인할 수 있다.
• 사용자가 원한다면 + 버튼을 눌러 프로젝트 등록하기 폼을 열 수 있다.
• 여기서 프로젝트 이름, github 링크, 그리고 부가 설명을 달아준 후 업로드를 한다.
• 프로젝트 리스트 항목 중 하나를 터치하면 사용자가 등록한 정보와 깃허브 링크의 readme 파일을 자동으로 불러와 사용자에게 보여준다.

TAB 2: 도전과제

도전과제 페이지

• 사용자의 프로젝트 등록 수, 프로젝트의 조회 수를 통하여 도전과제 달성 여부를 알려준다.
• 일정 도전과제 조건을 만족하면 도전과제 카드의 색이 밝게 들어와 사용자가 자신의 도전과제 달성 여부를 확인할 수 있도록 해준다.

TAB 3: 내 정보와 로그아웃

내 정보 확인 페이지	숨겨진 정보 확인

• 내 정보로 들어가 Username, Email, Score을 확인할 수 있고, Logout 버튼을 통하여 로그아웃을 수행할 수 있다.
• Score은 프로젝트 개수로 계산한다.
• Username, Email, Score의 세 리스트를 버튼으로 하여 누르면 정보가 보여지도록 하였다.
• 로그아웃 버튼을 누르면 첫번 째의 로그인 창으로 돌아오며, 카카오톡이던, 메일을 통해 로그인을 했던지 모두 로그아웃 처리로 된다.

로딩중 화면

앱 시작 로딩	포스트 로딩	README.md 로딩

• 로그인이나 로그아웃 같이 구동 시간이 걸리는 작업에서는 사이사이에 loading page를 넣어 사용성을 강화했다.
• 시작 로딩은 Progress bar, 포스트 및 MD 파일 로딩의 경우 Shimmer loading effect를 사용하였다.