[통독-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
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 02일 10:23:09
-
Ttongtok-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)
- 기록 모드가 기본이므로 기존 동작 영향 없음 -
Ttongtok-select 상태 변경: 진행 중 → 리뷰
2026년 03월 02일 10:18:21
-
Ttongtok-select 티켓 클레임 완료
2026년 03월 02일 10:16:50