백로그
0할 일
0진행 중
0리뷰
0완료 (15일)
2[MP-1] YouTube Audio Player Stimulus 컨트롤러 + 파셜 + QT 통합
## 목표 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 존재 확인
[MP-2] 통독하기 미디어 플레이 통합
## 목표 통독하기 페이지에서 각 성경 장의 오디오를 들을 수 있는 기능을 추가한다. ## 사전 조건 - `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)에 읽음/안읽음 토글 버튼 ### 완료 기준 - 각 책 카드에서 듣기 기능 접근 가능 - 장 선택 후 오디오 재생 동작 - 모바일 반응형 - 기존 읽음/안읽음 토글 기능 유지