[MP-2] 통독하기 미디어 플레이 통합

ID: a99c551d-e402-4655-bc7d-b0dcee634d8e

높음 완료

## 목표
통독하기 페이지에서 각 성경 장의 오디오를 들을 수 있는 기능을 추가한다.

## 사전 조건
- `shared/_youtube_player.html.erb` 파셜과 `youtube_player_controller.js`가 이미 구현되어 있어야 함 (MP-1에서 구현)
- 해당 파일들이 없으면 기다리지 말고 직접 확인 후 존재하면 진행

## 작업 내용

### 1. 통독 장별 재생 버튼 추가
- `app/views/tongtok/_book_card.html.erb` 수정
- 각 책 카드에 "듣기" 버튼 추가 (Stimulus 컨트롤러로 토글)
- 듣기 버튼 클릭 시 해당 책의 오디오 플레이어 영역 표시

### 2. 통독 오디오 플레이어 Stimulus 컨트롤러
- 파일: `app/javascript/controllers/tongtok_player_controller.js`
- 책 이름을 받아 `bible-youtube-urls.json`에서 해당 책의 모든 장 URL 조회
- 장 선택 UI: 드롭다운 또는 가로 스크롤 장 번호 리스트
- 선택한 장의 오디오 재생 (기존 youtube_player_controller 활용 또는 독립 구현)
- 연속 재생 옵션: 현재 장 끝나면 다음 장 자동 재생

### 3. UI 디자인
- 각 book_card 하단에 접을 수 있는 플레이어 영역
- 또는 book_card의 장 번호 옆에 작은 재생 아이콘
- Tailwind CSS v4 디자인 시스템 토큰 사용
- 모바일 우선 반응형

### 참고: bible-youtube-urls.json 구조
```json
{ "창세기": { "1": "https://www.youtube.com/watch?v=VIDEO_ID", ... }, ... }
```

### 참고: 현재 book_card 구조
- `book[:name]`: 한글 전체 이름 (예: "창세기") → JSON 키와 일치
- `book[:chapters]`: 총 장 수
- 장 번호 그리드 (1~N)에 읽음/안읽음 토글 버튼

### 완료 기준
- 각 책 카드에서 듣기 기능 접근 가능
- 장 선택 후 오디오 재생 동작
- 모바일 반응형
- 기존 읽음/안읽음 토글 기능 유지

첨부 이미지

이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)

JPEG, PNG, GIF, WebP / 최대 10MB

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

활동 로그

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

    2026년 03월 02일 10:28:33

  • T
    tongtok-media MP-2 재확인 완료 - 구현 파일 존재, 테스트 통과 (DB lock은 병렬 실행 문제)

    2026년 03월 02일 10:27:55

    상세 보기

    ## 상태 확인
    - `tongtok_player_controller.js` 존재 확인 (14868 bytes)
    - `_book_card.html.erb` 수정 완료 확인
    - 테스트: 0 failures (DB lock errors는 병렬 실행으로 인한 SQLite 잠금 - 코드 문제 아님)
    - 이전 독립 실행 시 24 runs, 72 assertions, 0 failures, 0 errors

  • T
    tongtok-media 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 10:26:38

  • T
    tongtok-media MP-2 통독하기 미디어 플레이 통합 구현 완료

    2026년 03월 02일 10:26:38

    상세 보기

    ## 변경 사항

    ### 1. 신규 생성
    - `app/javascript/controllers/tongtok_player_controller.js` - 통독 페이지 전용 YouTube 오디오 플레이어 Stimulus 컨트롤러
    - YouTube API 직접 제어 (youtube_player_controller.js 패턴 재사용)
    - values: `bookName` (String), `totalChapters` (Number)
    - targets: `playerArea`, `chapterList`, `playerContainer`, `autoPlayToggle`, `toggleBtn`
    - 기능: 듣기 토글, 장 선택 재생, 연속 재생 (autoplay next chapter), 재생/일시정지/탐색/배속/음소거
    - innerHTML로 플레이어 UI 동적 렌더링

    ### 2. 수정
    - `app/views/tongtok/_book_card.html.erb`
    - 카드를 `data-controller="tongtok-player"`로 감쌈
    - 헤더에 듣기 토글 버튼 추가 (헤드폰 SVG 아이콘)
    - 장 그리드 아래 플레이어 영역 추가 (기본 hidden)
    - 가로 스크롤 장 선택 버튼
    - 플레이어 컨테이너 (동적 렌더링)
    - 연속 재생 체크박스 토글
    - **기존 읽음/안읽음 button_to 토글 완전 보존**

    ### 3. 디자인
    - 듣기 토글: `text-text-secondary hover:text-brand-primary` 활성 시 `text-brand-primary`
    - 선택된 장: `bg-brand-primary text-white`
    - 플레이어: `bg-surface-subtle rounded-xl p-3` (youtube_player 파셜과 동일)
    - 모바일 우선 (가로 스크롤 장 선택)

    ### 4. 테스트 결과
    - 446 runs, 1062 assertions, 0 errors
    - 기존 실패 2건 (`PrayerPartnersControllerTest`) - 본 변경과 무관

  • T
    tongtok-media MP-2 통독하기 미디어 플레이 통합 작업 시작

    2026년 03월 02일 10:24:18

    상세 보기

    ## 작업 계획
    - `tongtok_player_controller.js` Stimulus 컨트롤러 생성
    - `_book_card.html.erb` 수정 (듣기 토글 + 플레이어 영역 추가)
    - YouTube API 직접 제어 방식 사용 (youtube_player_controller 패턴 복사)
    - 연속 재생 기능 포함

  • T
    tongtok-dev 작업 시작 - 기존 코드 분석 완료

    2026년 03월 02일 10:21:26

    상세 보기

    ## 분석 완료된 파일
    - `youtube_player_controller.js` - YouTube API 로딩, 재생 컨트롤 로직 확인
    - `_youtube_player.html.erb` - 오디오 플레이어 UI 파셜 확인
    - `_book_card.html.erb` - 기존 책 카드 구조 확인
    - `tongtok_select_controller.js` - 기존 통독 모드/기록 모드 토글 확인
    - `bible-youtube-urls.json` - 한글 책이름 → 장번호 → YouTube URL 구조 확인

    ## 구현 계획
    1. `tongtok_player_controller.js` Stimulus 컨트롤러 생성
    2. `_book_card.html.erb`에 듣기 토글 + 플레이어 영역 추가

  • T
    tongtok-dev 티켓 클레임 완료

    2026년 03월 02일 10:19:59