PLUG (플러그) - 플레이리스트 생성 재생 플랫폼

개발 기간 : 25.04.07 ~ 25.04.28 (1차 개발 완료)

📎 테스트 계정 (feat. 배포 예정)

• 이메일 : plug@test.com
• 비밀번호 : 1q2w3e4r@

🎰 Team JackPot

이름	역할
송하 @poan1221	아이디어 발의 / 기획 / 메인 페이지 음원 추출, 플레이리스트 저장 기능 개발
김별 @lbyul	디자인 / 검색 페이지, 플레이리스트 조회, 재생 기능 개발
임희건 @HeekunLim	회원가입, 로그인, 회원정보 수정 기능 개발
전진우 @GiToon10100011	로그인 상태관리, 음원 ai 추천 기능 개발

👉 Team Convention

🛠️ 프로젝트 소개

"타임라인에서 내가 좋아하는 노래만 골라, 나만의 플레이리스트로!"
3시간짜리 플레이리스트 유튜브 영샹을 들으면서, '아 이 노래 빼고 듣고 싶다.', 'A, C, E, F 노래만 가진 플리어디 없나' 생각해본 적 없으신가요?

이 프로젝트는 그런 아이디어를 실현하기 위해 만들어졌습니다!

🎯 주요 목표:

• 긴 영상을 음악 리스트로 추출
• 추출된 리스트에서 원하는 곡만 골라 새로운 플레이리스트 생성
• 플레이리스트 저장 및 음악 재생
• Spotify 추천 기능 제공
• Youtube로 공유 및 플레이리스트 이동

📌 주요 기능

1. 원하는 곡만 선택해서 리스트 생성

• 유튜브 링크에 포함된 음악 리스트 추출
• (회원) 추출된 리스트 중 원하는 곡만 골라서 내 플레이리스트로!

2. Spotify api / Youtube api 를 통한 정확한 음원 검색

• Spotify api를 통한 ISRC 코드를 기반으로 youtube 검색을 진행하여 공식 음원을 조회합니다.
• 검색한 음악도 바로 플레이리스트에 추가할 수 있어요!

3. 회원 전용 플레이리스트에서 음악 재생

• 저장된 플레이리스트 조회 및 재생 기능을 제공합니다.

4. 회원가입, 로그인, 개인정보 수정

• 이메일 인증과 유효성 검사를 통과한 사용자만 가입 가능
• 가입 후 로그인, 개인정보 수정(이메일 제외), 회원 탈퇴 기능 제공

🔥 기술 스택

• Web/DB:
• 외부 API 연동:
• Collabo:

🗓️ 프로젝트 관리

- 이슈 추적 및 일정 관리를 위한 툴로 지라 사용

📂 프로젝트 구조

├── app/
│   ├── api/
│   ├── (anon)/
│   │   ├── components/ # 페이지 내부 components
│   ├── (sign)/
│   ├── components/ # 공통 components (modal, button .. etc)
├── application/
│   ├── usecases/
│   ├── dto/
├── domain/
│   ├── entities/
│   ├── repositories/
├── hooks/
├── infra/
│   ├── repositories/
├── store/
├── utills/

• 4계층 클린아키텍쳐 구현 (app/api, application/usecase, domain, infra)
• app 외부에 hook, utills, store 등 공통 기능용 폴더 위치
• 공통 스타일을 위한 선언 파일만 public/styles 에 위치 (reset, mixin, variable) / 각 페이지별 스타일은 moduel.scss 로 적용

📂 ERD

🔫 트러블슈팅

1. YouTube 검색 API 는 짠돌이야..

• 문제점: 잘만 되던 검색 기능이 갑자기 api 오류로 진행되지 않는다면?

• 원인: 검색 api 의 사용 가능 하루 할당량이 너무 작음 ( 1검색 100 쿼터 / 1일 총 10,000 쿼터)

• 해결방안:

  
  

  • Youtube 검색api 를 최소한으로 사용하기 위해, search-query 방안 등을 고려하였으나 법적 문제를 저지르지 않기 위해 할당량이 풍부한 다른 대체 api 와의 혼용을 고안.
  • Spotify api 에서 ISRC 코드를 얻어, 여러 번 검색할 필요 없이 OR 연산자를 통해 Youtube 검색api에서는 동시 검색
  • musics table 을 추가하여 한번 검색/플레이리스트 저장된 항목은 다시 진행하지 않고 db data를 검색할 수 있는 방향로 ERD 변경

2. 너는 바보야, spotify.. 검색 정확도가 이게 뭐야

• 문제점: BTS 의 Butter 를 검색헀는데, Butter-fly 가 나오는 등의 잘못된 검색 현상이 발생

• 원인: 검색어 유사도와 일치 단어를 기준으로 결과가 나옴

• 해결방안:

  
  

  • 명확한 검색어 유도를 통해 문제 최소화

💫 개발 예정 기능

• 🎚️ 볼륨 조절 기능 추가
• 🔍 검색 방식 개선 (더 빠르고 정확하게)
• 📢 내가 만든 플레이리스트를 유튜브에도 공유 가능!