[MP-1] YouTube Audio Player Stimulus 컨트롤러 + 파셜 + QT 통합
ID: f3cfbdd1-79c3-4be7-82e6-202ef6ada9b9
## 목표
YouTube Iframe API를 사용한 오디오 플레이어 Stimulus 컨트롤러와 파셜을 생성하고, QT 본문 읽기 페이지에 통합한다.
## 작업 내용
### 1. Stimulus 컨트롤러: `youtube_player_controller.js`
- 파일: `app/javascript/controllers/youtube_player_controller.js`
- YouTube Iframe API 로드 (글로벌 1회만)
- 재생/일시정지, 프로그레스 바, 재생 속도(0.5x~2.0x), 음소거 기능
- Stimulus values: `videoId` (String), `title` (String)
- Stimulus targets: `player`, `playBtn`, `pauseBtn`, `progress`, `currentTime`, `duration`, `speed`, `muteBtn`
- 에러 처리 (YouTube 로드 실패 시 메시지 표시)
- `public/bible-youtube-urls.json`에서 URL 조회하는 헬퍼 함수 포함
### 2. Rails 파셜: `shared/_youtube_player.html.erb`
- 깔끔한 오디오 플레이어 UI (Tailwind CSS v4)
- 재생/일시정지 버튼, 프로그레스 바, 시간 표시
- 재생 속도 선택 드롭다운
- 음소거 버튼
- 디자인 시스템 토큰 사용 (text-text-primary, bg-surface-subtle 등)
- locals: `video_id:`, `title:` (필수)
### 3. QT 페이지 통합
- `app/views/qt/today.html.erb` 수정
- 성경 구절 카드 아래에 오디오 플레이어 추가
- `@qt_content.bible_passage`에서 책 이름과 장을 파싱하여 YouTube URL 조회
- 여러 장인 경우 각 장별 플레이어 표시
- 통독 구절(`reading_passage`)이 있으면 별도 플레이어도 표시
### 참고: bible-youtube-urls.json 구조
```json
{ "창세기": { "1": "https://www.youtube.com/watch?v=VIDEO_ID", ... }, ... }
```
### 참고: 기존 bible_passage_controller.js의 BOOK_MAPPINGS
- 한글 약어/전체 이름 → 영어 약어 매핑이 있음
- youtube-urls.json은 한글 전체 이름을 키로 사용
- 약어를 전체 이름으로 역변환하는 매핑 필요
### 완료 기준
- YouTube 플레이어가 QT 성경 구절에서 정상 작동
- 재생/일시정지/속도변경/음소거 동작
- 모바일 반응형
- 테스트: 통합 테스트에서 플레이어 HTML 존재 확인
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 10:28:32
-
Pplayer-dev 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 10:18:22
-
Pplayer-dev MP-1 구현 완료: YouTube Audio Player Stimulus 컨트롤러 + 파셜 + QT 통합
2026년 03월 02일 10:18:21
상세 보기
## 생성/수정된 파일
### 새로 생성
- `app/javascript/controllers/youtube_player_controller.js` - Stimulus 컨트롤러 (270줄)
- YouTube Iframe API 글로벌 1회 로드 (중복 방지, Promise 캐싱)
- 한글 약어/전체이름 → 전체이름 매핑 (66권 전부)
- bible-youtube-urls.json 조회 + 캐싱
- 다양한 구절 형식 파싱 (시편 23편, 창세기 1:1-5, 창1:1-5 등 10가지 패턴)
- 재생/일시정지, 프로그레스 바 (클릭 seek), 재생속도(0.5x~2.0x), 음소거 기능
- 에러 처리 (YouTube 로드 실패, URL 없음 등)
- disconnect 시 cleanup (interval 정리, player destroy)- `app/views/shared/_youtube_player.html.erb` - 파셜 (locals: passage, title)
- 컴팩트 카드 스타일 (bg-surface-subtle rounded-xl p-3)
- 디자인 시스템 토큰 사용
- 로딩 → 에러/플레이어 상태 전환
- 모바일 우선 반응형 (flex, shrink-0, truncate)
- 접근성 (aria-label)### 수정
- `app/views/qt/today.html.erb` - 성경 구절 카드 아래에 오디오 플레이어 추가
- 묵상 구절 플레이어 (항상 표시)
- 통독 구절 플레이어 (reading_passage 있을 때만)## 테스트 결과
- 434 runs, 1017 assertions, 0 failures, 0 errors -
Pplayer-dev MP-1 작업 시작: 기존 코드 분석 중
2026년 03월 02일 10:13:13
-
Pplayer-dev 티켓 클레임 완료
2026년 03월 02일 10:13:09