탭 UI 구현 (Stimulus + 뷰 재구성)

ID: 27518a53-a00a-4903-8770-81b49d2d95c7

높음 완료

## 작업 내용
1. `app/javascript/controllers/tab_controller.js` Stimulus 컨트롤러 신규 생성
- static targets = ["tab", "panel"]
- static values = { defaultTab: { type: String, default: "tongtok" } }
- switch(event) → 탭 active 스타일 토글 + 패널 show/hide
- URL hash로 탭 상태 유지 (#tongtok, #qt)

2. `app/views/qt/today.html.erb` 전면 재구성
- 상단 카드 (테마 정보 + 진행률) 유지
- 그 아래에 탭 네비게이션 추가: [통독] [QT] 두 개 탭
- **통독 탭 패널**:
- bible_passage 제목 카드 (성경 아이콘 + bible_passage 텍스트)
- 유튜브 플레이어 (bible_passage)
- 성경 본문 (bible-passage Stimulus 컨트롤러, passage=bible_passage)
- 통독 완료 체크 영역: turbo-frame id="reading_check" (reading-dev가 구현할 파셜 자리)
- **QT 탭 패널**:
- reading_passage 제목 카드 (reading_passage 텍스트, 없으면 bible_passage)
- 유튜브 플레이어 (reading_passage, 없으면 생략)
- 성경 본문 (bible-passage Stimulus 컨트롤러, passage=reading_passage 또는 bible_passage)
- 묵상 내용 카드 (content)
- 묵상 질문 카드 (questions)
- 묵상 기록 폼 (turbo-frame meditation_form)
- 일차 네비게이션 (이전/다음) 탭 외부 하단 유지

3. 탭 디자인: Tailwind CSS
- 탭 바: flex, border-b, gap-0
- 활성 탭: text-brand-primary, border-b-2 border-brand-primary, font-semibold
- 비활성 탭: text-text-muted, hover:text-text-secondary
- 패널 전환: hidden 클래스 토글

## 기존 코드 참고
- 현재 today.html.erb: 통독과 QT가 혼재 (bible_passage가 통독, reading_passage가 QT)
- 디자인 시스템: shared/card, shared/progress, shared/button, shared/alert, shared/youtube_player 파셜 사용

## 완료 기준
- tab_controller.js 생성
- today.html.erb 탭 구조로 재구성
- 기존 테스트 전체 통과 (rails test)
- reading_check turbo-frame 자리는 빈 프레임으로 둘 것 (reading-dev가 채움)

첨부 이미지

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

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

담당자: tab-dev
생성일: 2026년 03월 02일 12:19

활동 로그

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

    2026년 03월 03일 05:21:34

  • T
    tab-dev 상태 변경: 할 일 → 리뷰

    2026년 03월 02일 12:24:11

  • T
    tab-dev 탭 UI 구현 완료

    2026년 03월 02일 12:24:10

    상세 보기

    ## 변경 사항

    ### 신규 파일
    - `app/javascript/controllers/tab_controller.js` - 통독/QT 탭 전환 Stimulus 컨트롤러 (URL hash 지원, defaultTab value)

    ### 수정 파일
    - `app/views/qt/today.html.erb` - 통독/QT 탭 구조로 재구성

    ## 주요 변경 내용

    ### tab_controller.js
    - `tab`, `panel` targets 사용
    - `defaultTab` value (기본: "tongtok")
    - URL hash로 탭 상태 유지 (#tongtok, #qt)
    - 활성 탭: `text-brand-primary`, `border-brand-primary`, `border-b-2`, `font-semibold`
    - 비활성 탭: `text-text-muted`

    ### today.html.erb 재구성
    - **통독 탭**: bible_passage 제목 카드, YouTube 플레이어, 성경 본문 (bible-passage controller), 통독 완료 체크 turbo-frame (reading_check)
    - **QT 탭**: reading_passage (없으면 bible_passage 대체) 제목 카드, YouTube 플레이어, 성경 본문, 묵상 내용, 묵상 질문, 묵상 기록 폼 (turbo-frame)
    - 세션 스위처, 상단 테마 카드, 일차 네비게이션은 탭 외부에 유지
    - `turbo-frame id="reading_check"` 빈 프레임으로 두되 `@reading_chapters` 있을 때만 _reading_check 렌더링

    ## 테스트
    - QT 컨트롤러 테스트: 8 runs, 13 assertions, 0 failures