탭 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
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 03일 05:21:34
-
Ttab-dev 상태 변경: 할 일 → 리뷰
2026년 03월 02일 12:24:11
-
Ttab-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