소셜 운동 매칭 서비스
- 카카오 로그인 성공 시, 서비스에 등록된 회원이 아니라면 회원가입 진행
- 닉네임,
선호 운동 종목
, 종목 별 나의운동 수준
,선호 시간대
입력 - 입력된 정보를 통해
서비스를 더욱 원활하게 이용
할 수 있음
<상대방 시점에서 보이는 것도 넣어야함>
현재 시각으로 부터 30분
이내에 생성된 실시간 운동 모임이 지도에 표시됨- 아이콘 클릭 시 운동 모임의
상세 정보 확인 가능
- 우측 상단의 등록 버튼을 눌러 원하는 운동 선택
- 지도를 클릭하여 등록할 위치 조정 가능
현재 위치 기반 0~10km
까지 거리 설정 가능일자
,시간
,게임 종류
,게임 시간
,성별
필터 제공시간 순
,인원 순
,거리 순
으로 검색된 모임 정렬 가능
<여기에 5/6인 모임방 들어가면 채팅방 생성되는 gif가 필요해요> <여기에 채팅하고있는 gif가 필요해요>
인원이 가득 차게되면
해당 모임의채팅방
이 생성- 채팅 방에서
실시간으로 소통
가능
- 운동 모임, 또는 팀 채팅방에서 사람들과 채팅 가능
- 전체 목록의
팀 생성 탭
, 혹은팀 매칭 페이지
에서 팀 생성 가능 운동 종목
을 선택,친구를 추가
하고팀 정보를 입력
하여 팀 생성- 팀 생성 시
팀 채팅방
도 같이 생성됨
경기 등록 버튼
을 클릭날짜
,장소
,선호 시간대
선택 후 등록 완료 버튼 클릭
- 자신이 속한 팀 중 원하는 팀을 선택, 필터에서 매칭 조건을 선택하고
매칭 시작 버튼
클릭 - 조건에 맞는 팀과 매칭되면
알림
이 뜸
자신이 참여한 모든 운동 모임
확인 가능- ">" 버튼 클릭 시
매칭 상세 정보 확인 가능
팀 매칭 정보
확인 가능
레이팅
,승
,무
,패
순으로정렬
하여팀
의순위 확인
가능우측 상단의 필터
에서운동 종목
과게임 종류
선택 가능팀을 클릭
하여상세 정보
확인 가능- 상단 탭을
나의 팀 랭킹으로 전환
시나의 팀의 순위
도 확인 가능
내가 속한 팀의 목록
확인 가능- 팀을 클릭하면
팀의 상세정보
확인 가능
-
- 공원마다 현재 인원이 어떤 운동으로 몇명 등록되어 있는지 확인할 수 있어요.
- 농구, 축구, 배드민턴 중 내가 하고 싶은 운동에 사람이 부족할 때 지도에 표시를 남겨 인원을 모집할 수 있어요
-
- 원하는 거리, 시간 등을 설정하고 버튼 한번으로 간편하게 같이 운동할 사람을 모집할 수 있어요.
- 직접 운동 인원을 모집하는 게시글을 올려 같이 운동할 사람의 참여를 유도할 수 있어요.
-
- 내 팀과 수준이 비슷한 팀을 찾아서 매칭시켜줘요.
- 내 팀이 얼마나 잘하는지 알고 싶지 않나요? 팀 랭킹을 통해 우리 팀의 순위를 알 수 있어요.
-
- 사용자가 직접 초대하는 대신 매칭된 인원, 참여한 팀에 대해 자동으로 채팅방을 생성해줘요.
- 매칭이 완료되면 화면 중앙에 알림이 표시돼요.
- 형상 관리 : Gitlab
- 이슈 관리 : Jira
- 커뮤니케이션 : Mattermost, Webex, Notion, Discord
- 디자인 : Figma, PowerPoint, MiriCanvas
- Visual Studio Code
1.75.1
- IntelliJ
IntelliJ IDEA 2021.2.4(Ultimate Edition)
- React
18.2.0
- React-redux
8.0.5
Redux4.2.0
@Reduxjs/toolkit1.9.1
- React-Query
3.39.3
- React-Router
6.7.0
- Typescript
4.9.3
- TailwindCSS
3.2.4
- Vite
4.0.0
- Firebase
9.17.1
- Library
- moment
2.29.4
- swiper
9.0.3
- redux-persist
6.0.0
- react-calendar
4.0.0
- react-hook-geolocation
1.1.0
- @types/navermaps
3.6.1
- vite-plugin-mkcert
1.12.0
- moment
- Android Studio
- XCode
- VMWare
- Flutter
- Springboot
2.7.8
,3.0.2
- Lombok
- Spring Data JPA
- Spring Data Redis(lettuce)
- Spring Web
- Spring cloud(spring cloud gateway, spring cloud eureka, spring cloud config server)
3.1.3
- QueryDSL
- webflux, netty
- Springdoc-openapi-starter-webmvc-ui
2.0.0
- Oauth2
- WebSocket
- Redis
- MySql
- Swagger
3.0.0
- SSL
- CertBot(CA Certificates)`
-
웹 기반 하이브리드 어플리케이션
Flutter
를 활용하여 웹 및 앱 플랫폼 모두 사용 가능
-
사용자 알림
Firebase Cloud Message
를 이용하여 사용자에게 필요한 알림 제공
-
실시간 채팅
WebSocket
을 통하여 서버/클라이언트 통신 구현Stomp
메세지 브로커를 활용하여 1:N의 관계 구축Redis
를 활용하여 채팅방을 유지하고 여러대의 채팅 서버간에 메세지를 주고 받음
-
필터링
- 사용자가 원하는
조건
으로검색
하면 원하는 결과를 얻을 수 있도록 함
- 사용자가 원하는
-
자동 매칭
ELO알고리즘
기반 레이팅 시스템을 사용하여 비슷한 수준의 팀끼리 매칭될 수 있도록 함
-
카카오 로그인
OAUTH2
인증을 이용해 불필요한 개인정보 입력 최소화
-
CI/CD
- Gitlab과 Jenkins 파이프라인을 서로
동기화
시켜실시간
으로 빌드 상황을 볼 수 있음 - Jenkins 파이프라인을
병렬
로 실행하여 빌드 시간을 단축 시킴
- Gitlab과 Jenkins 파이프라인을 서로
-
Spring Cloud Gateway
- 하나의 주소로 서버에 접속할 수 있도록
패킷 분배
- 한가한 서버에게 업무를 배정하여 효율성을 증가시킬 수 있도록
로드밸런싱
- 특정 사용자의 요청을 차단하여
해킹 공격 방어
- 하나의 주소로 서버에 접속할 수 있도록
-
해킹 대응
Docker Hub
에 이미지를 업로드하고 이를 활용하여 재설치 시간을 단축- 해킹 서버를 받은 서버가 작동이 불가능하면 명령어 하나만으로
자동으로 모든 서비스를 정상화
- Jenkins를 사용하지 않아야 할 때
명령어 하나만
으로 수동 CI/CD 가능하도록Shell script
로 구현
이경택 | 이강윤 | 박진성 | 김아린 | 김태훈 | 유도열 |
---|---|---|---|---|---|
Frontend | Frontend | Frontend | Backend | Backend | Backend |
Frontend
- 박진성 : UX/UI 설계, 실시간 매칭 페이지, 영상 제작
- 이강윤 : UX/UI 설계, 회원관리 및 실시간 채팅 페이지, 회의록 작성
- 이경택 : 기획 및 UX/UI 설계, 실시간 운동 모임 페이지, 로그인, 실시간 알림, 채팅, 랭킹, 비동기 데이터 처리, 발표
Backend
- 유도열 : 실시간 채팅
- 김아린 : DB설계 및 구축, 운동 모임, 팀 통계/매칭, PPT 제작
- 김태훈 : 아키덱쳐 설계, CI/CD 및 MSA 아키텍처 구축, OAUTH 소셜 로그인, 회원 관리, Hybrid App 개발