https://github.com/codestates-seb/seb40_main_014

🎧 플레이리스트 공유 플랫폼 💜러플리(Luvpli)💜
https://github.com/codestates-seb/seb40_main_014

Last synced: 11 months ago
JSON representation

🎧 플레이리스트 공유 플랫폼 💜러플리(Luvpli)💜

• Host: GitHub
• URL: https://github.com/codestates-seb/seb40_main_014
• Owner: codestates-seb
• Created: 2022-11-07T04:47:10.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-03-06T02:23:49.000Z (about 3 years ago)
• Last Synced: 2025-06-15T02:08:36.585Z (12 months ago)
• Language: TypeScript
• Homepage:
• Size: 3.41 MB
• Stars: 6
• Watchers: 2
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# 러플리 (Luvpli)

![로고](https://user-images.githubusercontent.com/74370531/205530048-516ae0ad-9cd6-4683-ab1e-104afa0682f6.png)

### 🔗 배포 : https://luvpli.link

### 🔗 노션 : https://www.notion.so/codestates/b4ec65e1bdb246b4b3c01dd68f3f9063









## 🐻 팀명 : 하리보싱싱 




## ✨ 팀원 소개

|  |  |  |  |  |  | 

| :------: | :------: | :------: | :------: | :------: | :------: |

| 문지훈 | 송준모 | 홍유진 | 노영석 | 김아리 | 정경은 |

| 👑 FE | FE | FE | 👑 BE | BE | BE |

|[@moonjh9392](https://github.com/moonjh9392)|[@merrychrisml](https://github.com/merrychrisml)|[@yujinyny](https://github.com/yujinyny)|[@Youngseoki](https://github.com/Youngseoki)|[@lielocks](https://github.com/lielocks)|[@bbororo](https://github.com/bbororo)




## ✅ 맡은 역할

FE



- 문지훈 : 유튜브 API를 이용한 playlist CRUD 및 마이페이지 관리

- 송준모 : 방 CRUD, Stomp를 통한 웹 소켓 통신(실시간 채팅), 방에서 playlist 관리

- 홍유진 : 소셜(Google) 로그인 및 회원정보 수정, 메인(홈, 랭킹, 검색) 기능 담당



BE



- 노영석 : 회원 CRUD, 랭킹, 팔로우, 검색

- 김아리 : 방 CRUD, 웹소켓 Stomp 통신 실시간 채팅 구현

- 정경은 : playlist CRUD






## 🎧 서비스 소개 : 플레이리스트 공유 플랫폼

러플리는 자신이 좋아하는 음악들로 구성한 플레이리스트를 생성해 공유할 수 있는 플레이리스트 공유 플랫폼입니다. 러플리는 접근성이 좋은 유튜브를 활용하여 개인이 플레이리스트를 생성하고, 서로 공유하고, 자신의 플레이리스트를 사람들과 같이 들으며 실시간 소통할 수 있는 서비스입니다. 

러플리에서는 채팅방에서 플레이리스트를 같이 들으며 실시간으로 소통할 수 있고, 서로의 플레이리스트를 북마크하거나 좋아요를 누르는 방식, 맘에 드는 DJ를 팔로우하는 것으로 상호작용이 가능합니다. 

자신의 플레이리스트가 좋아요를 많이 받거나, 자신을 팔로우 한 사람이 많아질수록 러플리 랭킹에 반영이 되고 인기 DJ가 될 수 있습니다!




## 🚀 기술 스택

### Cloud

  

### Web



### Front-end

     

### Back-end

     

### Code Management

 

### Formatting

 




## 🖥️ 아키텍처

![아키텍처](https://user-images.githubusercontent.com/74370531/205537012-98c79bf2-4115-4996-a228-945ebf5e4623.png)




## ⏩ 기능 시연

메인(로그인)



![로그인](https://user-images.githubusercontent.com/74370531/205856932-0ba8e78b-ea5a-4bdf-8326-d9af2aaabd6a.gif)

- 러플리 사이트에 접속하면 헤더 오른쪽 상단에 로그인 버튼을 눌러 소셜 로그인을 할 수 있습니다.

- 로그인 된 상태에서 헤더 상단의 본인 정보를 클릭하면 마이페이지로 가거나 로그아웃을 할 수 있습니다.



메인(room/playlist 리스트)



![메인](https://user-images.githubusercontent.com/74370531/205857913-0ed5147e-cd55-41fb-8fbe-a598a6702ad0.gif)

- 메인페이지는 방 메인페이지와 플레이리스트 메인페이지로 나뉘어져 있습니다.

- 방 메인페이지의 경우 현재 생성되어있는 모든 방을 보여주는 전체 리스트와 랭킹에 등재되어 있는 인기 DJ의 방을 보여주는 인기 DJ 방송 리스트, 그리고 가장 많은 인원이 접속해있는 방을 보여주는 가장 많은 청취자가 있는 방송 리스트로 나뉘어져 있습니다.

- 로그인 한 상태라면 방 메인페이지에서 방 생성과 방 접속이 가능합니다.

- 메인페이지의 경우 사용자 참여 및 컨텐츠 탐색에 용이한 무한스크롤로 페이지네이션을 대체했습니다.

- 플레이리스트 메인페이지의 경우 가장 많은 좋아요를 받은 플레이리스트 목록과 랭킹에 등재된 인기 DJ의 플레이리스트 목록, 그리고 전체 플레이리스트 목록으로 구성되어 있습니다.

- 로그인 한 상태라면 플레이리스트 메인페이지에서 플레이리스트 생성과 플레이리스트 상세 조회가 가능합니다.



랭킹



![랭킹](https://user-images.githubusercontent.com/74370531/205857115-d5f1856a-edbd-421e-a964-f5fe4c82f585.gif)

- 러플리에서는 플레이리스트 좋아요와 DJ를 팔로우한 팔로워 수를 합산하여 스코어를 책정하고 높은 순서대로 랭킹에 등재됩니다. 랭킹의 경우 일정시간마다 갱신됩니다.

- 러플리에서는 스코어 점수에 따라 등급을 부여받습니다. 등급은 해당 유저 페이지에서 조회 가능합니다.





검색



![검색](https://user-images.githubusercontent.com/74370531/205857144-2f5a4436-696e-4527-929b-28e68569b8ce.gif)

- 검색 페이지에서는 유저, 플레이리스트, 방을 대분류로 선택하여 검색할 수 있습니다.

- 방의 경우 제목, 장르, 방장명을 소분류로 설정, 플레이리스트의 경우 플레이리스트 제목, 장르, 플레이리스트 생성 유저를 소분류로 설정, 유저의 경우 유저명을 소분류로 설정해 검색합니다.

- 검색 했을 때 해당 방 / 플레이리스트의 장르 태그를 클릭할 경우 해당 장르 태그를 가진 모든 방 / 플레이리스트를 조회합니다.



유저(마이) 페이지



![my1](https://user-images.githubusercontent.com/45509511/205621702-51271264-4ead-4bef-8e79-83680a0af941.gif)

![my2](https://user-images.githubusercontent.com/45509511/205621717-02734795-9f49-471c-84e5-84a4f2decf5c.gif)

- 유저의 페이지에는 닉네임, 자기소개, 유저의 등급을 확인할 수 있습니다. 등급은 랭킹에서 책정되는 스코어에 따라 나뉩니다.

- 본인의 페이지일 경우 닉네임과 자기소개 변경이 가능합니다. 여기서 닉네임은 중복된 이름을 허용하지 않습니다.

- 유저 페이지에서는 해당 유저의 플레이리스트 목록, 해당 유저가 북마크한 플레이리스트 목록, 팔로우 한 DJ를 확인할 수 있습니다. 본인의 페이지일 경우 플레이리스트 생성이 가능하고 생성되어 있는 플레이리스트 수정 및 삭제가 가능합니다. 또한 북마크한 플레이리스트를 해제하거나 팔로우한 DJ를 언팔로우할 수 있습니다.



playlist 생성



![create](https://user-images.githubusercontent.com/45509511/205621776-91feb88c-8000-4476-8b07-dbeb6aa08aa5.gif)

- 플레이리스트는 자신만 볼 수 있게 비공개 설정이 가능합니다.

- 플레이리스트 제목을 설정하고 카테고리를 설정한 후 유튜브 URL을 입력해 추가 버튼을 누르면 플레이리스트 노래 목록에 추가됩니다. 플레이리스트 제목의 경우 20자 이내의 제목 설정이 가능합니다.



playlist 수정



![modify](https://user-images.githubusercontent.com/45509511/205621809-750f5727-4568-4bf5-8093-80e10a956f50.gif)

- 플레이리스트 수정 페이지에서는 플레이리스트 제목, 카테고리, 플레이리스트 노래 목록을 수정할 수 있습니다. 플레이리스트 노래 목록이 2개 이상일 경우 순서를 바꾸고 싶은 노래를 드래그하면 노래의 순서를 원하는 곳으로 이동시킬 수 있습니다.



playlist 삭제



![delete](https://user-images.githubusercontent.com/45509511/205621826-0e9e5257-8d31-49ca-a790-109927bffea3.gif)

- 플레이리스트 상세 페이지에서 삭제 버튼을 누르면 플레이리스트가 삭제됩니다.



playlist 상세



![detail](https://user-images.githubusercontent.com/45509511/205621905-463530da-fd0a-45b2-81ee-a504eaaf8feb.gif)

- 플레이리스트 상세 페이지에서는 해당 플레이리스트를 좋아요하거나 북마크할 수 있습니다. 본인의 플레이리스트일 경우 수정 및 삭제가 가능하고 플레이리스트 노래 목록에 있는 노래를 클릭하면 해당 유튜브 URL로 이동합니다.



room 생성/수정









- 방 메인페이지에서 로그인한 상태로 방 만들기 버튼을 클릭할 경우 방 만들기 모달이 나타납니다. 방 제목의 경우 20자 이내로 작성해야 하고 비밀번호를 설정할 수 있습니다. 플레이리스트 추가 버튼을 눌러 해당 방의 플레이리스트를 설정합니다. 설정할 수 있는 플레이리스트는 본인의 플레이리스트 혹은 북마크한 플레이리스트를 선택할 수 있습니다.

- 방에 들어간 이후 방을 만든 사람은 방장 권한을 받습니다. 방장은 오른쪽 하단 채팅방에 참여한 인원 리스트에 방장 아이콘을 부여받습니다. 방장은 방 수정을 할 수 있습니다. 방 수정은 방 제목만 가능합니다.



room 입장/퇴장









- 러플리의 유저는 로그인 한 후 메인페이지에 있는 방을 클릭하면 방 입장이 가능합니다. 방의 비밀번호가 존재할 경우 비밀번호를 입력해야 합니다. 방에 입장하면 플레이리스트 안내 모달이 나타납니다.

- 방 나가기를 클릭하면 방을 나갈 수 있습니다. 방에 본인밖에 없을 때 방을 나가게 되면 해당 방은 삭제됩니다.(운영자의 방은 삭제되지 않습니다.)



room 플레이리스트 재생/채팅









- 방에 들어간 이후 오른쪽에 있는 플레이리스트 재생 버튼을 누르면 플레이리스트에 있는 노래가 재생됩니다. 현재 재생되고 있는 노래는 플레이리스트 노래 제목 옆에 스테레오 아이콘으로 표시됩니다.

- 노래가 끝나면 다음 노래가 자동 재생 됩니다.

- 오른쪽 화살표 버튼을 누르면 다음 곡 재생, 왼쪽 화살표 버튼을 누르면 이전 곡 재생이 됩니다. 볼륨 버튼을 클릭하면 음소거를 할 수 있습니다.

- 같은 방에 있는 인원들은 실시간 채팅이 가능합니다. 오른쪽 하단에는 채팅방에 참여한 인원이 표시됩니다. 표시된 인원을 팔로우하거나 표시된 인원의 유저 페이지로 이동이 가능합니다.






## 📝 커밋 컨벤션

| Emogi | 유형 | 설명 |

| :------: | :------: | :------: |

| ✨ | feat | 기능 생성 |

| 🐛 | fix | 에러 수정 |

| 🚀 | build | 배포 |

| 🎉 | init | 프로젝트 시작 |

| 💄 | style | 스타일 수정 |

| ♻️ | refactor | 리팩토링 |

| 🔨 | chore | 짜잘한 수정 |

| 🔥 | remove | 코드/파일 삭제 |

| ✅ | test | 테스트 추가/수정 |