📼 You-Together 친구와 함께 Youtube 시청

Overview

🔗 배포 링크

🔗 API 문서 링크

🙌 서비스 소개

• 친구와 채팅하며 Youtube 영상을 함께 시청하는 서비스입니다.
• 재생시간 동기화를 통해 Youtube 영상의 같은 구간을 함께 시청하는 것이 특징인 서비스입니다.

🤝 팀원 구성

👩‍💻 BE: Hyun, Fia
👨‍💻 FE: poco

기술 스택

Frontend: React, TypeScript, Next.js, Tailwind CSS

작업 관리

주 3회 정기 회의를 통해 작업 순서 및 방향성에 대해 고민을 나누고 작업 내용을 공유하여 회의록 작성

---

프로젝트 구조

├── README.md
├── .eslintrc.json
├── .gitignore
├── package-lock.json
├── package.json
│
└── src
     ├── api
     │     ├── add-playlist.ts
     │     ├── change-role.ts
     │     ├── get-rooms.ts
     │     ├── get-video-info.ts
     │     └── reorder-playlist.ts
     │          .
     │          .
     │          .
     ├── app
     │     ├── [roomId]
     │     ├── globals.css
     │     ├── layout.tsx
     │     ├── opengraph-image.tsx
     │     ├── page.tsx
     │     └── providers.tsx
     ├── asset
     │     └── icon.tsx
     ├── components
     │     ├── playlist
     │     │     ├── playlist-item.tsx
     │     │     └── playlist.tsx
     │     ├── chat.tsx
     │     ├── navbar.tsx
     │     ├── participants-list.tsx
     │     ├── room-table.tsx
     │     └── video-player.tsx
     │          .
     │          .
     │          .
     ├── hooks
     │     ├── use-add-playlist.ts
     │     ├── use-change-role.ts
     │     ├── use-get-rooms.ts
     │     ├── use-get-video-info.ts
     │     └── use-reorder-playlist.ts
     ├── lib
     │     └── query-client.ts
     ├── schemas
     │     ├── change-nickname.ts
     │     └── rooms.ts
     ├── service
     │     ├── user.ts
     │     └── video.ts
     ├── types
     │     ├── api.d.ts
     │     ├── change-role.d.ts
     │     ├── change-nickname.d.ts
     │     ├── join-room.d.ts
     │     └── message.d.ts
     │          .
     │          .
     │          .
     └── paths.ts

---

주요기능

💬 실시간 채팅

• 웹 소켓을 사용하여 실시간 채팅을 통해 YouTube 영상을 주제로 소통하거나, 다양한 주제에 대해 자유롭게 대화할 수 있습니다.

⏱️ 재생시간 동기화

• 재싱시간 동기화를 통해 같은 방에 있는 사용자는 동일한 시간대의 youtube 영상을 시청할 수 있습니다.

방(공개방, 비공개방) 생성 및 입장

• 사용자는 공개방 또는 비공개방을 생성할 수 있고 비공개방은 올바른 비밀번호를 입력해야 입장할 수 있습니다.

⌨️ 방 제목 검색

• 특수문자를 제외한 원하는 키워드가 포함된 방을 검색할 수 있습니다.

📼 재생목록 추가, 삭제 및 순서 수정

• 재생목록에 새로운 youtube 영상을 추가하거나 기존 영상을 삭제할 수 있습니다.

• 재생목록에 있는 youtube 영상의 재생순서를 수정할 수 있습니다.

닉네임 변경

• 사용자의 입력값에 대해 즉시 유효성 및 중복 검사를 진행한 후 검사를 통과하면 닉네임을 변경할 수 있습니다.

다른 사용자의 권한 변경

• MANAGER 이상 권한을 가진 사용자는 다른 사용자의 권한을 변경할 수 있습니다.

💪 사용자 권한에 따른 기능 구분

HOST : 방 제목 변경 권한을 가지며, MANAGER 권한의 모든 기능을 수행할 수 있습니다.

MANAGER : 다른 사용자의 권한을 변경할 수 있으며, EDITOR 권한의 모든 기능을 수행할 수 있습니다.

EDITOR : 재생목록 관리 및 영상 싱크 조정이 가능하며, GUEST 권한의 모든 기능을 수행할 수 있습니다.

GUEST :채팅이 가능하며, VIEWER 권한의 모든 기능을 수행할 수 있습니다.

VIEWER : 영상 시청만 가능합니다.

모든 사용자 : 닉네임 변경

• 해당 기능에 대한 권한이 없는 사용자의 경우, 알림을 통해 사용자에게 해당 기능에 대한 권한이 없음을 알려줍니다.

  • 예를들어, 영상 싱크 조정이 불가능한 사용자의 경우에는 권한이 없다는 알림과 함께 영상 싱크는 이전과 동일하게 유지됩니다.

---

🔫 Trouble Shooting

• 브라우저의 자동재생 정책으로 인한 문제
• Third-Party 쿠키 이슈