- 첫 웹 토이 프로젝트!
- 공군 병사가 사지방에서 gitpod.io로 개발!
- 공군이 내놓은 디자인 적극 활용!
Link: https://rokaf.click/
rokaf.click 공군 부대 간 클릭 수로 경쟁합니다.
POPCAT.CLICK 이라는 사이트를 알고 있나요? 국가 간 클릭 수를 이용해 순위를 매기는 게임을 할 수 있는 사이트입니다. 해당 게임을 공군 부대끼리 진행하면 어떨까요? rokaf.click은 이 아이디어에서 시작되었습니다.
React와 NextJS를 공부한 후 이들을 사용하여 진행해보고 싶은 프로젝트들을 나열했습니다. 여러가지가 있었지만, 이 프로젝트가 제일 쉬워보여서 이 녀석을 먼저 개발하기 시작했습니다. (물론 절대 만만하지 않았습니다.)
이용자의 부대 위치를 선택합니다. 부대 위치는 나무위키와 위키백과에 있는 공군 편제 문서를 참고하여 작성되었습니다.
- 부대 위치를 선택하면 캐릭터가 활성화됩니다.
- 부대 위치를 선택하면 리더보드에 현재 부대 랭크 정보가 표시됩니다.
버튼의 캐릭터 이미지를 선택합니다.
캐릭터의 디자인은 '공군이 내놓은 디자인 - 뚠뚠이 의복캐릭터 (작성자: 병장 이성선)'을 사용하였습니다.
캐릭터 이미지를 클릭하면 애니메이션과 함께 점수가 올라갑니다.
올라간 점수는 리더보드에서 업데이트된 랭크와 점수로 표시됩니다.
모든 부대를 클릭 수로 정렬하여 그들의 랭크를 표시합니다.
캐릭터를 클릭할 때마다 업데이트됩니다.
부대 위치를 바꾸거나, 페이지를 새로고침 및 창 닫기 (onBeforeUnload) 이벤트가 발생할 때마다 Custom API로 POST 요청을 보내 서버 점수를 업데이트합니다.
Netlify: https://app.netlify.com/sites/beautiful-cendol-31e2b4/overview