프로젝트 설명

BGIT 이라는 서비스는 교내에서 Github 커밋수와 백준의 티어를 기준으로 랭킹을 매겨 승부욕을 늘리는 앱입니다.

⚡️ 주요 기능

🎬 시연 영상

https://youtu.be/jyKcr5VSnN0

프로젝트 정보

👥 팀원

🐈‍⬛ GitHub

💫 사용 기술

<aside> <img src="/icons/thought-dialogue_gray.svg" alt="/icons/thought-dialogue_gray.svg" width="40px" /> 왜 BSM OAUTH를 사용했을까? 교내 학생들을 대상으로 하는 프로젝트이기 때문에, 교내 학생들이라는 정보를 얻으려면 BSM OAUTH(학교 로그인 시스템)을 사용하여 인증해야 했습니다.

</aside>

👩‍💻 담당 업무

Frontend

<aside> <img src="/icons/document_gray.svg" alt="/icons/document_gray.svg" width="40px" /> 폴더 구조 정리, 모듈화 프로젝트를 개발할 때 코드를 더 직관적이고, 폴더 구조를 정리하고 확일화 했습니다. 또한 provider등을 사용하여 상태관리를 했습니다.

</aside>

<aside> <img src="/icons/user-circle_gray.svg" alt="/icons/user-circle_gray.svg" width="40px" /> 로그인 / 회원가입 관련 로직 작성 및 구현 BSM OAUTH 를 적용하고, 로그인 후 추가 정보를 저장했습니다.

</aside>

<aside> <img src="/icons/grid_gray.svg" alt="/icons/grid_gray.svg" width="40px" /> 깃허브 랭킹, 백준 랭킹 페이지 구현 http를 사용해 랭킹 데이터를 가져오고, singlechildscrollview 위젯을 사용하여 무한스크롤 으로 볼 수 있게 개발했습니다.

</aside>

<aside> <img src="/icons/feed_gray.svg" alt="/icons/feed_gray.svg" width="40px" />

깃허브, 백준 애니메이션 구현 1차적으로, 랭킹 페이지에서 AppBar 아래쪽 TextButton 을 통해 깃허브, 백준랭킹을 구현하려고 했습니다. 그러기 위해, Stack 위젯을 이용하여 서로 랭킹리스트를 겹치게 만들었고, AnimatedScale 을 사용해 부드럽게 연출하려고 했고, Duration 에 간격을 두어 더 자연스럽게 나오도록 노력했습니다. 마지막으로, 앱의 효율성을 위하여 Provider 를 사용해 bool값을 상태관리 하였습니다.

</aside>

<aside> <img src="/icons/chart_gray.svg" alt="/icons/chart_gray.svg" width="40px" />

랭킹페이지 구현 makeRankPaper 이라는 함수를 만들고, 반복문을 사용하여 사용자만큼의 랭킹 위젯들을 생성했습니다. 또한, 실시간으로 랭킹이 변동될수 있기 때문에 랭킹 페이지에 들어가면 http 를 사용해 바로 값을 요청하고 받아왔습니다.

</aside>

<aside> <img src="/icons/user-circle-filled_gray.svg" alt="/icons/user-circle-filled_gray.svg" width="40px" /> 마이페이지 구현 로그아웃 버튼을 통해 사용자가 언제든지 계정을 바꿀 수 있도록 구현했습니다.

</aside>