롤 전적 검색 사이트 만들기(2)

2) 웹페이지 구현 및 시각화

Python-Flask를 사용했으며 부트스트랩으로 시각화 했습니다. 

코드가 길어 생략합니다. (코드는 https://github.com/Yeowoolee/LOL-API-Statistics 에서 확인 가능합니다.)

 

• 이번 글에서는 페이지의 구성에 대해서만 간략히 설명합니다.

 

메인화면 header

로그인 전 상단(header)

로그인 후 상단(header)

모든 페이지의 상단에 존재해야 하기 때문에 base.html의 <header> 에 코드를 작성 했습니다.

jinja2 문법으로 사용자가 로그인에 성공하면 버튼이 바뀌도록 했습니다.

 

 

메인화면 body 

메인화면 body

메인화면에는 위와 같이 소환사 정보 검색창, 라인 별 챔피언 추천, 추천 영상이 노출 되도록 했습니다.

• 소환사 정보 검색창을 통해 리그오브레전드 게임 아이디를 넣고 검색하면 해당 아이디의 게임 정보가 표시된 페이지로 이동합니다.
• 라인 별 챔피언 추천은 각 라이별 승률이 높은 챔피언을 모달을 통해 보여줍니다.
• 추천 영상은 나만의 팁에서 작성한 글에 영상이 포함되어있을 경우 노출됩니다.

소환사 정보 확인 페이지

• 소환사 정보 검색 후 위 페이지로 이동하게 됩니다.
• api를 통해 불러온 정보를 시각적으로 보여주는 페이지 입니다.
• 위와같이 페이지 상단에서는 현재 티어와 리그정보, 랭크 포인트 승패 정보와 모스트 챔피언 최근 경기 K/D/A를 그래프로 확인 할 수 있습니다.
• 페이지 body 부분에는 최근 20 게임의 정보가 표시됩니다.

나만의 팁 페이지

• 나만의 팁 페이지에서는 각 라인별 팁을 확인 할 수 있습니다.
• 글쓰기 버튼을 클릭하면 글을 작성 할 수 있는 모달이 나타납니다.

 

유저매칭 페이지

• 내 정보를 등록하기 전에는 유저 매칭이 이루어지지 않습니다.
• 유저매칭을 위해 자신의 게임 아이디와 라인, 주로하는 챔피언을 등록합니다.
• 데이터베이스에 등록된 다른 사용자 정보를 이용해 매칭합니다.

---

 

Yeowoolee/LOL-API-Statistics