/drink-us

Primary LanguageJavaScript


SSAFY MATE

목차

  1. 웹 서비스 소개
  2. 기술 스택
  3. 주요 기능
  4. 프로젝트 아키텍쳐
  5. 데모 영상
  6. 개발 팀 소개

💁 웹 서비스 소개

DrinkUs 는 시공간의 제약없이 자유롭게 즐기는 화상채팅 기반 온라인 술자리 서비스입니다.

DrinkUs는 나이대 및 관심사 기반 방 추천을 통해 처음 만나도 대화가 자연스럽게 시작될 수 있도록 유도해 편하게 서비스를
즐길 수 있습니다.

커뮤니티를 통한 술자리 예약 기능, 아이스 브레이킹을 위한 간단한 술게임 및 대화 주제 추천 등 다양한 기능을 제공합니다.


🛠 기술 스택

Front-end

HTML5 CSS3
HTML5 CSS3
React.js Redux
React Redux
Socket.io Styled-Component MUI
Socket.io Styled-Component AXIOS

Back-end

Java Spring-Boot SpringSecurity Hibernate
Java Spring-Boot SpringSecurity Hibernate
Node.js Socket.io MySQL
Node.js Socket.io MySQL
Postman
Postman

DevOps

NGiNX aws Jenkins docker
NGiNX aws Jenkins docker

  • VSCode 1.70
  • InteliJ 2022.1.3
  • React 18.2
  • Redux 4.2.0
  • StyledComponent 5.3.5
  • Redux-Thunk 2.4.1
  • React-Router-Dom 6.4
  • Node 16.16.0
  • Axios 0.27.2
  • Java 1.8
  • Spring Boot 2.7.1
  • Spring Security 2.0
  • JPA 2.0
  • OAuth 2.0
  • JWT 0.9.1
  • MySQL 8.0.30
  • Ubuntu 20.04
  • Docker 20.10.17
  • Jenkins 2.361
  • nginx 1.18.0
  • Stomp 6.1.2
  • firebase 8.10.0
  • Openvidu 2.22.0

EC2 포트 정리

PORT 이름
443 HTTPS
80 HTTP, nginx
8443 Openvidu
3306 MySQL
8080 Jenkins
8081, 8082 Spring boot API Server
8888 Kurento Media Server

💡 주요 기능

기능 내용
WebRTC 기술을 활용한 라이브 기능 OpenVidu를 사용하여 본 서비스의 비대면 화상채팅 서비스를 구현함
커뮤니티 및 알림기능 온라인 술자리 예약등록 및 소통공간 제공, 사용자간의 상호작용을 FCM 알림을 통해 시각적으로 도움을 줌
게임기능 StompSocket을 사용하여 화상미팅 방에서 사용자들이 실시간으로 다양한 컨텐츠를 즐길 수 있음
추천서비스 - 회원은 관심사를 추가하여 자신의 추가정보를 입력 할 수 있음
- 방은 대분류 관심사를 두어 포괄적으로 참가자를 포함시킴

📂 프로젝트 아키텍쳐

아키텍처(Architecture)


🎥 데모 영상

🔗 서비스 소개 영상 바로가기 Click ! 👈

새 창 열기 방법 : CTRL+click (on Windows and Linux) | CMD+click (on MacOS)


👪 개발 팀 소개

김갑경 프로필 조민규 프로필 한다빈 프로필 이민우 프로필 김민정 프로필 성유지 프로필
김갑경
(FullStack & 팀장) 		조민규
(Back-end) 		한다빈
(Back-end) 		이민우
(Front-end) 		김민정
(Front-end) 		성유지
(Front-end)

팀 노션 바로가기


이름 역할
개발 내용
김갑경 FullStack
팀장		 - BE
- OAuth2.0 라이브러리를 이용하여 구글/카카오 소셜 로그인 기능
- 월간 게시판: 월별 일정 조회, 일별 일정 조회, 일정 상세조회, 나의 일정 조회, 일정 생성/수정/삭제/참가/취소 기능 구현
- 일간 게시판: 글/댓글 조회, 내가 쓴 글 조회, 글/댓글 작성, 글 수정/삭제 기능 구현
- 스톰프 소켓을 이용한 화상방 내 게임 기능 구현: 대화주제/건배사 추천, 폭탄돌리기, 랜덤 마시기
- FE
- 회원가입 시 유효성 체크 및 CSS
- 화상방 게임 기능을 위한 STOMP Socket 코드 구현
- 커뮤니티 페이지 구조 잡기
- 월간 게시판 달력 구조 잡기 및 전체 CSS
- 달력에 일정 표시
- 일정 생성,삭제,수정, 조회 구현
- 폭탄돌리기 게임 CSS
- 화상방 만들기 모달창으로 만들고 CSS
- 오픈비두 프로젝트 적용 및 CSS 수정
- Infra
- Openvidu On-Promise 방식으로 배포
- Jenkins와 nginX, Docker를 사용하여 CI/CD를 적용한 Front-End프로젝트 배포
- 프론트엔드, STOPM, OAUTH Nginx 리다이렉트 설정 및 분기처리
조민규 Back-end - 관리자 및 신고 기능 : 사용자 신고 및 신고처리, 사용자 목록 조회 및 관리 기능
- 회원 기능 : 프로필 조회, 회원 탈퇴, 아이디 및 비밀번호 찾기, 인기도 관련 기능 구현
- Spring security : JWT Refresh Token 발급 및 재발급 구현
- SMTP를 활용한 구글 이메일 발송 및 인증 기능 구현
- 화상방 기능 : 방 생성, 방 삭제, 방 추천 로직 작성 및 기능 구현
- 닉네임 랜덤 생성 api 적용
- 코드 리팩토링
- nginx, openvidu https 인증을 위한 ssl 인증서 설치 및 적용
- 방 생성, 방 수정, 관리자 페이지 구현
- Styled-Component를 이용한 CSS-in-JS 방식으로 스타일링 작업
- 메인 페이지 애니메이션, Footer 구현
한다빈 Back-end - 초기 스켈레톤 구조 설계 및 작성
- 코드 리팩토링
- 멀티 모듈 구조 적용
- Junit을 이용한 테스트 코드 일부 작성
- Spring Security 적용 및 JWT를 이용한 회원 인증 , 인가 코드 작성
- 회원 기능 : User와 관련된 Entity 작성, 회원가입, 아이디 중복검사,
비밀번호 수정, 회원정보 수정 구현
- 화상방 기능 : Room과 관련된 Entity 작성, 방 상세조회, 동적쿼리를 이용한 화상방 필터링
전체 조회,화상방 수정, 회원의 관심사에 따른 화상방 추천리스트 동적쿼리 작성
- Stomp Socket 설정 및 연결 - 게임 기능 : 대화주제 추천, 폭탄돌리기,
폭탄 돌리기 게임 결과 구현
- 관심사 기능 : Category와 관련된 Entity 작성, 관심사 관련 기능 모두 구현
- 알림 기능 : Firebase FCM 연결, FCM 알림보내기, 알림 리스트 조회 구현
- Jenkins와 nginX, Docker를 사용하여 Back-End프로젝트 배포 완료
- CI/CD 적용
- Styled-Component를 이용한 CSS-in-JS 방식으로 스타일링 작업
- react-intersection-observer Package를 활용하여 페이지 무한 스크롤 기능 구현
- Firebase FCM 등록 설정 및 FCM 알림 받아서 알림창 띄우기 구현
이민우 Front-end - 초기 스켈레톤 구조 설계 및 작성
- Swal (Sweet Alert) - 다양한 기능과 디자인을 가진 Alert창을 구현
- Styled-Component를 이용한 CSS-in-JS 방식으로 스타일링 작업
- 로그인 : Redux를 통한 회원 정보 상태 관리
- 로그인 : axios interceptor를 이용한 api요청 전 / 후 accessToken, refreshToken 체크
- 아이디 / 비밀번호 찾기 화면 및 기능 구현
- 메인페이지 : 네온사인 타이틀 디자인 구현
- 화상미팅방 : Redux를 이용한 화상미팅방 세션관리
- 404 Not Found 페이지 개발
- 페이징 처리를 위한 페이지네이션 컴포넌트 개발
- 라우팅 : 사용자 인증 라우팅 구현 (비로그인 사용자가 메뉴이용시 로그인 화면으로 이동)
- 회원 프로필 페이지 및 프로필 변경 기능 구현
- 회원 관심사 페이지 및 관심사 변경 기능 구현
- 세션관리 : Redux-persist 패키지를 이용하여 토큰 데이터 유지
- Modal 및 Modal Content 컴포넌트화를 통한 코드 재사용
- 오픈비두 프로젝트 적용 및 채팅, 컨텐츠 버튼 전체적인 css 작성
김민정 Front-end - 회원가입 와이어프레임 제작
- 회원가입: 동의 페이지 / 유형 선택 페이지(로컬, 소셜) / 최종 회원가입 페이지_이메일 형태 체크, 이메일 인증 유효성, 이메일 중복확인, 비밀번호 유효성 - 신고: 신고 유형 작성 및 기능 구현
- 프로필: 타 유저의 프로필 보기+인기도 수정 기능 구현
- 데일리 게시판: 게시글, 댓글 CRUD
- 컴포넌트화된 코드(버튼, 배경, 페이징) 적용
성유지 Front-end - 설계 : 메인, 커뮤니티, Live, 마이페이지 와이어프레임 제작
- 설계 : 에셋, 컬러팔레트 제작
- 디자인 : 프로젝트에 사용되는 아이콘, 파비콘 취합 및 제작
- 메인 페이지 : 하단 슬라이드, 탑 버튼 구현
- 화상미팅방 생성 로직 구현
- 화상미팅방 상세조회 모달 구현
- 방 추천 페이지 배너 디자인 및 전체 페이지 구현
- 방 필터링, 검색 로직 구현
- 방 목록 페이지 구현
- 화상미팅방 생성시간 로직구현

📅 개발 기간

22.07.05. ~ 22.08.19


커밋 규칙

  1. 모두 각자 branch에서 기능개발 후 PR
  2. PR 후 팀원모두함께 코드리뷰 진행 후 팀장이 merge
  3. 커밋 방법
    • issue에 이슈를 등록 ex) #fe-01, #be-01
    • 이슈 해결 후 커밋메세지 규칙으로 커밋 후 PR, 권한자가 merge
    • issue close
  4. 메시지 규칙
    • commit 메시지 예시
      • Feat : 관심지역 알림 ON/OFF 기능 추가(#fe-01)
    • feat : 새로운 기능에 대한 커밋
    • fix : build 빌드 관련 파일 수정에 대한 커밋
    • build : 빌드 관련 파일 수정에 대한 커밋
    • chore : 그 외 자잘한 수정에 대한 커밋(rlxk qusrud)
    • ci : CI 관련 설정 수정에 대한 커밋
    • docs : 문서 수정에 대한 커밋
    • style : 코드 스타일 혹은 포맷 등에 관한 커밋
    • refactor : 코드 리팩토링에 대한 커밋
    • test : 테스트 코드 수정에 대한 커밋

이미지 출처

flaticon

GIPHY