DrinkUs 는 시공간의 제약없이 자유롭게 즐기는 화상채팅 기반 온라인 술자리 서비스입니다.
DrinkUs는 나이대 및 관심사 기반 방 추천을 통해 처음 만나도 대화가 자연스럽게 시작될 수 있도록 유도해 편하게 서비스를
즐길 수 있습니다.
커뮤니티를 통한 술자리 예약 기능, 아이스 브레이킹을 위한 간단한 술게임 및 대화 주제 추천 등 다양한 기능을 제공합니다.
 |
 |
|---|---|
| HTML5 | CSS3 |
 |
 |
|---|---|
| React | Redux |
 |
 |
 |
|---|---|---|
| Socket.io | Styled-Component | AXIOS |
 |
 |
 |
 |
|---|---|---|---|
| Java | Spring-Boot | SpringSecurity | Hibernate |
 |
|
 |
|---|---|---|
| Node.js | Socket.io | MySQL |
 |
|---|
| Postman |
 |
 |
 |
 |
|---|---|---|---|
| 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
| 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을 사용하여 화상미팅 방에서 사용자들이 실시간으로 다양한 컨텐츠를 즐길 수 있음 |
| 추천서비스 | - 회원은 관심사를 추가하여 자신의 추가정보를 입력 할 수 있음 - 방은 대분류 관심사를 두어 포괄적으로 참가자를 포함시킴 |
새 창 열기 방법 : 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
- 모두 각자 branch에서 기능개발 후
PR PR후 팀원모두함께 코드리뷰 진행 후 팀장이merge- 커밋 방법
issue에 이슈를 등록 ex)#fe-01,#be-01- 이슈 해결 후 커밋메세지 규칙으로 커밋 후
PR, 권한자가merge - issue close
- 메시지 규칙
commit메시지 예시Feat : 관심지역 알림 ON/OFF 기능 추가(#fe-01)
feat: 새로운 기능에 대한 커밋fix: build 빌드 관련 파일 수정에 대한 커밋build: 빌드 관련 파일 수정에 대한 커밋chore: 그 외 자잘한 수정에 대한 커밋(rlxk qusrud)ci: CI 관련 설정 수정에 대한 커밋docs: 문서 수정에 대한 커밋style: 코드 스타일 혹은 포맷 등에 관한 커밋refactor: 코드 리팩토링에 대한 커밋test: 테스트 코드 수정에 대한 커밋