[통독-1] 다중 선택 UI + 통독하기 버튼

ID: c6c18cb8-0e87-483c-a5b6-7297196af3db

높음 완료

## 목표
통독 현황 페이지에서 성경 장을 다중 선택하고 "통독하기" 버튼으로 읽기 페이지로 이동하는 기능 구현

## 현재 상태
- app/views/tongtok/index.html.erb: 통독 현황 페이지 (구약/신약 탭)
- app/views/tongtok/_book_card.html.erb: 책 카드 (각 장을 button_to로 읽음/미읽음 토글)
- 현재는 장 클릭 시 바로 POST/DELETE로 읽음 토글됨

## 구현 내용

### 1. 모드 전환 UI
- index.html.erb 상단에 "기록 모드" / "통독 모드" 토글 버튼 추가
- **기록 모드 (기본)**: 현재처럼 장 클릭 시 읽음/미읽음 즉시 토글 (button_to 유지)
- **통독 모드**: 장 클릭 시 선택/해제 (파란색 테두리 표시)

### 2. Stimulus 컨트롤러
- `app/javascript/controllers/tongtok_select_controller.js` 생성
- data-controller="tongtok-select" 를 index 컨테이너에 적용
- 기능:
- `toggle()`: 모드 전환 (기록 ↔ 통독)
- `selectChapter(event)`: 장 선택/해제
- `startReading()`: 선택된 장들을 URL 파라미터로 읽기 페이지 이동
- `clearSelection()`: 선택 초기화
- 타겟:
- `modeButton`: 모드 전환 버튼
- `selectionBar`: 하단 플로팅 바
- `selectionCount`: 선택 수 텍스트
- `chapterGrid`: 장 그리드 컨테이너들

### 3. _book_card.html.erb 수정
- 기존 button_to 유지하되, 통독 모드일 때는 숨기고 JS 버튼 표시
- 각 장 버튼에 `data-action="tongtok-select#selectChapter"` 추가
- `data-book-name`, `data-chapter` 데이터 속성 추가
- 선택 시 CSS: `ring-2 ring-brand-primary bg-brand-primary/10`

### 4. 플로팅 액션 바
- index.html.erb 하단에 고정 바 추가 (통독 모드에서만 표시)
- 내용: "N장 선택됨" + "선택 초기화" + "통독하기" 버튼
- 통독하기 클릭 시 → `/tongtok/read?selections=창세기:1,2,3;출애굽기:1,2` 형식으로 이동

## 담당 파일 (다른 파일 수정 금지)
- app/javascript/controllers/tongtok_select_controller.js (생성)
- app/views/tongtok/index.html.erb (수정)
- app/views/tongtok/_book_card.html.erb (수정)

## 완료 기준
- 기록 모드에서 기존 동작 유지 (button_to 읽음 토글)
- 통독 모드에서 다중 장 선택 가능
- 선택 시 플로팅 바에 선택 수 표시
- "통독하기" 클릭 시 /tongtok/read?selections=... 으로 이동
- 기존 테스트 깨지지 않을 것

첨부 이미지

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

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

담당자: tongtok-select
생성일: 2026년 03월 02일 10:14

활동 로그

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

    2026년 03월 02일 10:23:09

  • T
    tongtok-select 다중 선택 UI + 통독하기 버튼 구현 완료

    2026년 03월 02일 10:18:31

    상세 보기

    ## 변경 사항

    ### 생성된 파일
    - `app/javascript/controllers/tongtok_select_controller.js` - Stimulus 컨트롤러
    - toggle(): 기록 모드 ↔ 통독 모드 전환
    - selectChapter(): 장 선택/해제 (Map + Set으로 관리)
    - startReading(): /tongtok/read?selections=창세기:1,2,3;출애굽기:1,2 형식으로 이동
    - clearSelection(): 선택 초기화
    - updateSelectionBar(): 선택 수 표시 업데이트

    ### 수정된 파일
    - `app/views/tongtok/index.html.erb`
    - data-controller="tongtok-select" 래핑
    - 헤더에 모드 전환 토글 버튼 추가
    - 하단 플로팅 액션 바 (선택 수 + 초기화 + 통독하기 버튼)
    - bottom-20으로 하단 네비와 겹침 방지

    - `app/views/tongtok/_book_card.html.erb`
    - 기록 모드: 기존 button_to 유지 (recordMode 타겟, 기본 표시)
    - 통독 모드: JS 버튼 추가 (selectMode 타겟, 기본 숨김)
    - 선택 시 ring-2 ring-brand-primary bg-brand-primary/10 스타일

    ## 테스트 결과
    - 기존 테스트 4개 전부 통과 (0 failures, 0 errors)
    - 기록 모드가 기본이므로 기존 동작 영향 없음

  • T
    tongtok-select 상태 변경: 진행 중 → 리뷰

    2026년 03월 02일 10:18:21

  • T
    tongtok-select 티켓 클레임 완료

    2026년 03월 02일 10:16:50