star1606 / opgg-project-react

게임경기 검색 OP.GG React 프로젝트

OPGG Project

1. 프로젝트 개요

-OP.GG는 월간 4500만명의 이용자가 사용하는 게임 전적 검색 사이트입니다. https://www.op.gg
-본 프로젝트는 OP.GG 의 어플리케이션과 웹을 클론 코딩하였습니다.
-리그오브레전드 게임 유저의 데이터를 API를 통해 조회하고 실제 경기 승, 패 상세내용을 제공하고 있습니다.
Riot API: https://developer.riotgames.com
-커뮤니티 서비스를 제공하고 있습니다.

프로젝트 Notion: https://www.notion.so/OP-GG-Project-c335ba2152ca430cac31dc1c020afa63

Spring boot 서버: https://github.com/bk6717/opgg

Android App : https://github.com/jaybon1/opggProject

2. 개발환경

• Visual Studio Code
• Spring Tool Suite4
• React 16.13.1, React-router
• nodejs v12.18.2
• Spring boot JPA
• MySQL 8.0

3. 사용기술

React

• Hooks
• styled-components
• axios

Springboot JPA

• JWT token
• OAuth 2.0
• Security

메인, 랭킹화면

소환사 검색 화면

• 검색을 하면 API에서 유저정보를 불러옵니다.
  
  
  

전적 갱신

• API를 불러와서 게임 전적을 최신화합니다.
  

• 경기 내용에 있는 토글을 클릭하면 경기 상세 내용을 볼 수 있습니다.
  
  
  

회원가입 화면

OAuth 로그인

• 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: 마지막페이지

게시글 검색

글쓰기

글 상세 화면

시연 동영상 : ➡️ 링크

opgg-project-react's Issues

image Upload

C:\reactlab\OPGG-Project-React\src\capture\communitysearch.gif
C:\reactlab\OPGG-Project-React\src\capture\Honeycam 2020-09-08 12-28-34.gif
C:\reactlab\OPGG-Project-React\src\capture\oauthlogin4.gif
C:\reactlab\OPGG-Project-React\src\capture\ranking2.gif
C:\reactlab\OPGG-Project-React\src\capture\rankingsearch1.gif
C:\reactlab\OPGG-Project-React\src\capture\rankingupdate3.gif
C:\reactlab\OPGG-Project-React\src\capture\rankingupdate4.gif