[P2] 기도 페이지 4탭 통합 + 인터랙션 개선

ID: d2a5dae6-2a50-42b3-a4f1-6eb3095e944b

높음 완료

H1: 기도 4탭 통합 (Today/목록/동역자/통계), H2: Today 기도 진행률, H5: CSS 애니메이션, H6: 하단 네비 스크롤 숨김

첨부 이미지

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

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

담당자: phase2-agent
생성일: 2026년 03월 03일 11:04

활동 로그

  • T
    team-lead 상태 변경: 리뷰 → 완료

    2026년 03월 03일 11:22:47

  • R
    rails-dev H1/H2/H5/H6 구현 확인 및 테스트 전체 통과

    2026년 03월 03일 11:20:24

    상세 보기

    ## 확인 결과 (4항목 모두 이미 구현 완료)

    ### H1: 기도 페이지 4탭 통합 ✅
    - `prayers/index.html.erb`: 4탭 구조 (Today/기도 제목/동역자/통계)
    - `prayers_controller.rb`: `partners_tab`, `stats_tab` 액션 구현
    - `config/routes.rb`: `partners_tab`, `stats_tab` 라우트 등록
    - `tab_controller.js` 활용, Turbo Frame lazy loading 적용

    ### H2: Today 기도 진행률 ✅
    - Today 탭에 "오늘의 기도 X/Y" 진행률 바 (`shared/_progress`)
    - 매일 기도 / 요일 기도 섹션 분리
    - Controller에 `@daily_prayers`, `@weekly_today_prayers`, `@today_progress` 로직

    ### H5: CSS 애니메이션 유틸리티 ✅
    - `application.css`에 `fade-in`, `slide-up` keyframes
    - `.animate-fade-in`, `.animate-slide-up` 유틸리티 클래스

    ### H6: 하단 네비 스크롤 숨김 ✅
    - `scroll_nav_controller.js`: 스크롤 다운→숨김, 스크롤 업→표시
    - `_bottom_nav.html.erb`에 `data-controller="scroll-nav"` 연결
    - `transition-transform duration-300 ease-in-out` 적용

    ## 테스트 결과
    - prayers_controller_test.rb: 29 runs, 82 assertions, 0 failures
    - 전체 테스트: **553 runs, 1343 assertions, 0 failures, 0 errors**

  • P
    phase2-agent 상태 변경: 진행 중 → 리뷰

    2026년 03월 03일 11:12:37

  • P
    phase2-agent 기도 페이지 4탭 통합 + 인터랙션 개선 완료

    2026년 03월 03일 11:12:30

    상세 보기

    ## 완료된 작업

    ### H1: 기도 페이지 4탭 통합
    - `prayers/index.html.erb` 완전 재작성 → 4탭 구조 (Today/기도 제목/동역자/통계)
    - `tab_controller.js` 활용 (hash 기반 URL 탭 전환)
    - Today 탭: 매일 기도 + 오늘 요일 기도 분리 표시
    - 기도 제목 탭: 기존 전체/매일/주간 필터 유지 (pill 버튼)
    - 동역자 탭: Turbo Frame lazy load (`partners_tab` 액션)
    - 통계 탭: Turbo Frame lazy load (`stats_tab` 액션)

    ### H2: Today 기도 진행률
    - 진행률 카드 (오늘의 기도 X/Y) + `shared/_progress` 파셜 활용
    - PrayersController#index에 today 데이터 로직 추가
    - `@daily_prayers`, `@weekly_today_prayers`, `@today_progress` 등

    ### H5: CSS 애니메이션 유틸리티
    - `application.css`에 `@keyframes fade-in`, `slide-up` 추가
    - `.animate-fade-in`, `.animate-slide-up` 유틸리티 클래스
    - 동역자/통계 탭 콘텐츠에 적용

    ### H6: 하단 네비 스크롤 숨김
    - `scroll_nav_controller.js` 생성 (Stimulus)
    - 스크롤 다운 → `translate-y-full` (숨김)
    - 스크롤 업 → `translate-y-0` (표시)
    - 300ms ease-in-out 트랜지션
    - `_bottom_nav.html.erb`에 컨트롤러 연결

    ## 수정된 파일
    - `app/controllers/prayers_controller.rb` - index 확장, partners_tab/stats_tab 액션 추가
    - `app/views/prayers/index.html.erb` - 4탭 구조 재작성
    - `app/views/prayers/partners_tab.html.erb` - 신규 (Turbo Frame)
    - `app/views/prayers/stats_tab.html.erb` - 신규 (Turbo Frame)
    - `app/assets/tailwind/application.css` - 애니메이션 추가
    - `app/javascript/controllers/scroll_nav_controller.js` - 신규
    - `app/views/shared/_bottom_nav.html.erb` - scroll-nav 컨트롤러 연결
    - `config/routes.rb` - partners_tab, stats_tab 라우트 추가
    - `test/controllers/prayers_controller_test.rb` - 8개 테스트 추가
    - `test/fixtures/prayer_requests.yml` - today_weekly_prayer 추가

    ## 테스트 결과
    - 기도 컨트롤러: 29 runs, 82 assertions, 0 failures
    - 전체: 549 runs, 1334 assertions, 0 failures, 0 errors

  • P
    phase2-agent 작업 시작: 기존 코드 분석 완료

    2026년 03월 03일 11:06:30

    상세 보기

    ## 분석 완료
    - PrayersController: index/new/create/edit/update/destroy/stats/check/import_from_qt
    - 기존 테스트 21개 모두 통과
    - tab_controller.js: hash 기반 탭 전환 지원 (이것을 활용)
    - tabs_controller.js: data-id 기반 탭 전환

    ## 구현 계획
    1. H5: CSS 애니메이션 유틸리티
    2. H6: 하단 네비 스크롤 숨김
    3. H1+H2: 기도 4탭 통합 + Today 진행률

  • P
    phase2-agent 티켓 클레임 완료

    2026년 03월 03일 11:05:08