-OP.GG는 월간 4500만명의 이용자가 사용하는 게임 전적 검색 사이트입니다.
https://www.op.gg
-본 프로젝트는 OP.GG 의 어플리케이션과 웹을 클론 코딩하였습니다.
-리그오브레전드 게임 유저의 데이터를 API를 통해 조회하고 실제 경기 승, 패 상세내용을 제공하고 있습니다.
Riot API: https://developer.riotgames.com
-커뮤니티 서비스를 제공하고 있습니다.
Spring boot 서버: https://github.com/bk6717/opgg
Android App : https://github.com/jaybon1/opggProject
- Visual Studio Code
- Spring Tool Suite4
- React 16.13.1, React-router
- nodejs v12.18.2
- Spring boot JPA
- MySQL 8.0
- Hooks
- styled-components
- axios
- JWT token
- OAuth 2.0
- Security
- 검색을 하면 API에서 유저정보를 불러옵니다.
- API를 불러와서 게임 전적을 최신화합니다.
- 경기 내용에 있는 토글을 클릭하면 경기 상세 내용을 볼 수 있습니다.
- OAuth 2.0 구글 로그인
- 로그인이 완료되면 JWT token을 받습니다.
// 0페이지가 되면 이전 버튼이 사라짐
const handlePrevPage = () => {
let prevPage = postPage - 1;
if (postPage < 0) {
return;
}
axios
.get("http://59.20.79.42:58002/post/" + prevPage)
.then((response) => {
console.log(response.data.statusCode);
setCommunityDtos(response.data.data);
setStatusCode(response.data.statusCode);
setPostPage(postPage - 1);
})
.catch((error) => {
console.log(error.response);
});
};
// 마지막 페이지가 되면 다음 버튼이 사라짐
const handleNextPage = () => {
let nextPage = postPage + 1;
axios
.get("http://59.20.79.42:58002/post/" + nextPage)
.then((response) => {
setCommunityDtos(response.data.data);
setStatusCode(response.data.statusCode);
setPostPage(postPage + 1);
})
.catch((error) => {
console.log(error);
});
};
statusCode 페이징 처리
statusCode 201: 첫페이지면서 마지막
statusCode 200: 첫페이지도 마지막페이지도 아님
statusCode 204: 마지막페이지
시연 동영상 : ➡️ 링크