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

담당자: theme-views
생성일: 2026년 03월 02일 12:18

활동 로그

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

    2026년 03월 03일 05:21:33

  • T
    theme-views 상태 변경: 할 일 → 리뷰

    2026년 03월 02일 12:21:34

  • T
    theme-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