QT 테마 뷰 (index + show + 카드 파셜)
ID: 0875583c-9435-4c24-acbb-b95fd82a7b34
## 목표
QT 테마 브라우즈 + 상세 페이지 뷰 구현
## 1. _theme_card 파셜 (app/views/qt/themes/_theme_card.html.erb)
- 디자인 시스템 shared/card 파셜 활용
- 표시: 제목, 설명(truncate), 총 일수, 성경 범위(bible_books), AI생성 뱃지
- 링크: qt_theme_path(theme)로 상세 이동
## 2. index 뷰 (app/views/qt/themes/index.html.erb)
- 페이지 제목: "QT 테마"
- 기본 테마 섹션 (is_default: true) + 일반 테마 섹션
- 반응형 그리드: grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
- 테마 없을 때 shared/empty_state 파셜 사용
## 3. show 뷰 (app/views/qt/themes/show.html.erb)
- 테마 정보: 제목, 설명, 총 일수, 성경 범위
- 콘텐츠 미리보기: @contents에서 처음 3일분만 표시 (day_number, theme_title, bible_passage)
- "이 테마로 플랜 시작" 버튼 → POST subscribe_qt_theme_path(@theme), method: :post
- @existing_session이 있으면 "이미 진행 중인 플랜이 있습니다" 안내 + 해당 세션 링크
- 뒤로가기: qt_themes_path
## 디자인 패턴 참고
- app/views/qt/sessions/index.html.erb (카드 레이아웃 패턴)
- app/views/shared/_card.html.erb, _button.html.erb, _badge.html.erb, _empty_state.html.erb
- 색상/텍스트: text-heading, text-body, text-small, text-caption
- 다크모드: bg-surface-default, text-text-primary 등 디자인 토큰 사용
## 완료 기준
- 3개 뷰 파일 생성, 디자인 시스템 일관성, 반응형 동작
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 03일 05:21:33
-
Ttheme-views 상태 변경: 할 일 → 리뷰
2026년 03월 02일 12:21:34
-
Ttheme-views QT 테마 뷰 파일 3개 구현 완료
2026년 03월 02일 12:21:33
상세 보기
## 생성된 파일
- `app/views/qt/themes/_theme_card.html.erb` - 테마 카드 파셜
- `app/views/qt/themes/index.html.erb` - 테마 목록 (추천/전체 섹션)
- `app/views/qt/themes/show.html.erb` - 테마 상세 (정보, 콘텐츠 미리보기, 구독 버튼)## 사용된 디자인 시스템
- `shared/card` (padding: :md)
- `shared/badge` (variant: :info, AI 뱃지)
- `shared/button` (variant: :primary, tag: :a)
- `shared/empty_state`
- `shared/separator`
- `button_to` (구독 액션)## 디자인 토큰
- text-text-primary/secondary/muted, text-brand-primary
- text-heading/subheading/body/small/caption
- bg-surface-default, text-status-warning
- grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3
- line-clamp-2, hover:shadow-md transition-shadow