✨ DIEDIE.gg v0.0.1

🔗 배포 주소

Notion 바로가기	FE GitHUb 바로가기	BE GitHUb 바로가기

🎯 서비스 소개

롤을 하면서 한 번이라도 누군가와 싸워본적이 있으신가요?
DIEDIE.gg는 리그 오브 레전드 유저 정보 조회 및 악성 유저 신고 커뮤니티입니다.
익명 뒤에 숨어서 욕을 하는 유저들을 신고하고, 유저의 신고 내역을 조회할 수 있습니다!

• 개발 기간 : 2023.08 ~ 2023.10

✨ 주요 기능 미리보기

  🔍 유저 검색

📌 유저 검색

• 소환사명 입력 후 엔터 또는 돋보기 아이콘을 클릭해 리그 오브 레전드 유저 검색이 가능합니다.

• 검색창 하단의 TIP 문구는 일정 시간 간격으로 랜덤하게 보여집니다.
  

  🔍 로그인 & 회원가입

📌 로그인

• 로그인시 이메일 비밀번호 둘중에 하나라도 일치하지 않으면 스낵바로 안내가 됩니다.
• 로그인이 완료되면 메인페이지로 이동됩니다.

📌 회원가입

• 고유한 닉네임값을 위해 회원가입 시 닉네임 중복검사를 진행합니다.

• 이메일 인증시 이미 가입된 이메일이라면 헬프메세지로 중복 닉네임 스낵바를 띄웁니다.

• 닉네임 중복이 아니라면 입력한 이메일로 인증번호가 보내지고 3분 타이머가 시작됩니다.

• 타이머 3분동안은 동일한 이메일로 인증번호 재발송이 어려우며 이메일 수정시 타이머가 멈추고 수정된 이메일로 메일 재발송시 타이머가 3분으로 초기화 되도록 하여 여러 상황에 따라 타이머가 멈추고 동작하도록 구현하였습니다.

• 닉네임, 이메일 중복확인, 이메일 인증, 비밀번호 일치여부 확인이 전부 이루어져야 회원가입 버튼이 활성화도되록 하였습니다.

• 회원가입이 완료되면 로그인 페이지로 이동됩니다.

  
  

  🔍 유저 정보 & 인게임 정보 조회

📌 유저 정보 조회

• 메인페이지 검색창에서 유저를 조회 후 해당 유저 클릭 시 유저 정보 페이지로 이동됩니다.
• 계정이 있는 유효한 사용자일 경우 게임 프로필 이미지, 유저 정보, 신고 유저 TOP 100 중 해당 순위, 게임 내 정보 등이 조회됩니다.
• Chart.js를 이용해 신고 내역과 유저 게임 내 정보를 시각화하여 출력하였습니다.
• 존재하지 않는 유저일 경우 에러페이지로 랜딩됩니다.
• 유저 신고 내역은 react-paginate의 페이지네이션을 이용해 5개씩 보여지도록 구현하였습니다.

📌 인게임 정보 조회

• 조회한 유저의 인게임 정보 클릭 시, 해당 유저가 게임 중일 경우 실시간 게임 데이터를 조회합니다.

• 이때 유저가 진행 중인 게임 내 유저들의 기본 정보와 신고 내역이 있을 경우 신고 횟수 및 최대 누적 카테고리를 출력합니다.

• 신고 내역이 없을 경우 모범시민이라는 문구가 보여집니다.

• 조회한 유저가 게임 중이 아닐 경우 진행 중인 게임이 없다는 문구를 출력합니다.

  
  

  🔍 유저 신고 등록 & 월별 신고 Top100 조회

📌 유저 신고하기

• 현재 기능 구현 중이며 구현 완료 시 세부 기능 안내 작성 예정입니다!

📌 월별 신고 내역 Top100 조회

• 현재 기능 구현 중이며 구현 완료 시 세부 기능 안내 작성 예정입니다!

  
  

  🔍 마이페이지

📌 내가 등록한 신고 목록

• 내가 신고한 내역만 모아서 확인이 가능합니다.
• 삭제가 가능하며 신고 사유를 5글자 이내 입력하지 않으면 삭제버튼이 눌리지 않습니다.

📌 닉네임 수정

• 고유한 닉네임을 위해 변경하고자 하는 닉네임이 중복되지 않았는지 확인합니다.

• 닉네임 저장하기를 누르면 마이페이지로 이동합니다.

• 저장이 완료되면 로컬스토리지에 변경된 닉네임으로 등록되고 마이페이지에 변경된 닉네임이 표시됩니다.

  
  

  🔍 한국어, 영어 다국어 처리

📌 다국어

• 현재 기능 구현 중이며 구현 완료 시 세부 기능 안내 작성 예정입니다!

  
  

🏗️ 기술 스택

Library
Programming Language
Styling
State Management
Version Control
Design
Communication

👪 개발팀 소개

프론트엔드	프론트엔드	프론트엔드	프론트엔드
신희제 (L)	김한솔	최유리	신주영
백엔드	백엔드	백엔드	디자이너
박준수 (L)	김용식	오성인	최혜민