[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

담당자: player-dev
생성일: 2026년 03월 02일 10:11

활동 로그

  • 팀리드 상태 변경: 리뷰 → 완료

    2026년 03월 02일 10:28:32

  • P
    player-dev 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 10:18:22

  • P
    player-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

  • P
    player-dev MP-1 작업 시작: 기존 코드 분석 중

    2026년 03월 02일 10:13:13

  • P
    player-dev 티켓 클레임 완료

    2026년 03월 02일 10:13:09