Skip to content

ljjunh/LeadMe

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SSAFY 11기 공통프로젝트 : LeadMe


🖥️ 프로젝트 소개

챌린지 가이드 제공

  • 스켈레톤 가이드라인을 따라하여 평소 만들고 싶었던 나만의 멋진 쇼츠 영상을 완성할 수 있습니다. 이제는 고민하지 말고, 원하는 쇼츠 영상 제작에 직접 도전해볼 수 있습니다.

나의 챌린지 점수는?

  • AI 모션 분석 기술로 내 춤 실력을 평가받아보세요! 기존 챌린지 영상과 비교하여 내가 얼마나 정확하게 따라했는지, 실시간으로 점수를 확인할 수 있습니다. 정확하게 따라할수록 높은 점수를 받을 수 있어요. 이제 내 챌린지 실력을 제대로 점검해볼 시간입니다 😎

친구와 함께하는 챌린지 배틀

  • 친구와 실시간으로 춤 배틀을 펼쳐보세요! 나의 챌린지 점수와 비교해가며 서로 경쟁하고, 더 즐거운 경험을 만들어가세요. 누가 더 챌린지 고수인지, 지금 바로 확인해보세요 💃

📹 프로젝트 시연 영상

https://youtu.be/Szto2ESb9Ss

⚙️ 개발 환경

FE

  1. 노드 버전 : v20.17.0
  2. React 버전 : 18.3.1
  3. TypeScript 버전 : 5.2.2
  4. 패키지 매니저 : npm 10.9.0

BE

  1. 자바 버전 : OpenJDK 17
  2. Springboot 버전 : 3.3.1
  3. 빌드 & 빌드 도구 : Gradle, Jenkins

🛠️ 기술 스택

FE

Language

TypeScript

Library

React Threejs OpenVidu BlazePose Socket.io Gsap Chart.js JoyRide Styled Components

State Management

React Query Recoil

BE

Framework

DB
MySQL MongoDB Redis

Library
JWT

Protocol & Message Queue

Server
Docker

Comunication

Notion GitLab


📋 기능 소개

📌 회원

Kakao, Google를 통해 소셜 로그인을 진행한다.
JWT 토큰을 이용하여 인증,인가를 진행하며 인가 시간이 초과한 경우 재로그인을 해야 한다.
아이디와,비밀번호를 통하여 인증을 진행하며 일치하지 않을 경우 서비스 사용을 할 수 없다.

📌 마이페이지

사용자는 마이페이지에서 자신이 올린 챌린지 영상을 조회할 수 있다.
자신이 팔로워 한 유저 목록, 자신을 팔로잉한 유저 목록을 조회할 수 있다.
채팅 페이지로 이동 및 프로필 편집을 할 수 있다.

📌 챌린지 연습하기

사용자에게 가이드 영상이 제공된다.
사용자는 가이드 영상을 속도조절, 일시정지, 좌우반전할 수 있으며, 연습 영상을 녹화할 수 있다.
녹화 화면에는 실시간으로 스켈레톤 가이드가 함께 표시된다.
녹화된 사용자 영상과 가이드 영상을 비교 분석하여 동작 유사도 그래프와 점수를 확인할 수 있다.
녹화된 영상은 다시보기가 가능하며, SNS에 공유할 수 있다.

📌 챌린지 배틀

사용자는 배틀 방을 생성할 수 있으며, 비밀번호 설정이 가능하다.
사용자는 생성된 배틀 방에 입장할 수 있다.
방 내 한 사용자가 영상을 선ㅌ개하면 실시간으로 양측 화면이 동기화된다.
배틀 화면에는 내 영상, 챌린지 영상, 상대방 영상이 표시되며, 내 화면에는 스켈레톤 가이드가 함께 제공된다.
실시간으로 스켈레톤과 사용자의 동작을 비교하여 'Good', 'Bad', 'Perfect' 피드백이 표시되며, 연속 성공 시 콤보가 나타난다.
배틀 종료 후 영상 분석을 통해 점수가 산정되어 승자가 결정된다.

📌 채팅

사용자는 마이페이지의 메시지목록에서 채팅을 진행할 수 있다.
사용자는 가입된 다른 사용자를 검색하여 채팅방을 개설할 수 있다.
채팅방 생성 및 삭제 시 채팅방 리스트 및 마지막 메세지가 최신화된다.
메시지목록 페이지 진입 시, 사용자가 읽지않은 메시지가 있다면 채팅방에 표시된다.

📌 랭킹

사용자가 게시한 챌린지 영상에서 받은 좋아요수의 총 합계를 계산하여 랭킹이 집계된다.
순위가 높은 유저부터 확인할 수 있고, 해당 유저를 클릭시 유저의 피드로 이동할 수 있다.
유저의 프로필 정보, 해당 유저가 받은 좋아요 수, 해당 유저의 팔로워 수를 확인할 수 있다.


🏗 아키텍처

아키텍처


📐 ERD

ERD

About

AI 모션 분석 기반 실시간 챌린지 배틀 서비스

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 6