백로그
0할 일
0진행 중
0리뷰
0완료 (전체)
2[통독-1] 다중 선택 UI + 통독하기 버튼
## 목표 통독 현황 페이지에서 성경 장을 다중 선택하고 "통독하기" 버튼으로 읽기 페이지로 이동하는 기능 구현 ## 현재 상태 - 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=... 으로 이동 - 기존 테스트 깨지지 않을 것
[통독-2] 성경 읽기 페이지 + 일괄 완료 처리
## 목표 선택된 성경 장들의 본문을 표시하는 읽기 페이지와, 읽기 완료 후 일괄 저장 기능 구현 ## 현재 상태 - TongtokController: index 액션만 있음 - BibleReadingsController: create(단일), destroy(단일) 만 있음 - bible_passage_controller.js: 성경 본문 파싱/렌더링 Stimulus 컨트롤러 (이미 존재) - public/data/bible/books/*.json: 66권 성경 JSON 데이터 (이미 존재) - BibleReadingLog 모델: user_id, book_name, chapter, read_date ## 구현 내용 ### 1. 라우트 추가 config/routes.rb에 추가: ```ruby get "tongtok/read", to: "tongtok#read" post "bible_readings/batch", to: "bible_readings#batch_create" ``` ### 2. TongtokController#read 액션 ```ruby def read # params[:selections] = "창세기:1,2,3;출애굽기:1,2" @selections = parse_selections(params[:selections]) if @selections.empty? redirect_to tongtok_path, alert: "읽을 장을 선택해주세요." return end end ``` - parse_selections 헬퍼: "창세기:1,2,3;출애굽기:1,2" → [{book_name: "창세기", chapters: [1,2,3]}, ...] ### 3. 읽기 뷰 (app/views/tongtok/read.html.erb) - 상단: 뒤로가기 버튼 (← 통독 현황) - 선택된 장 요약 (예: "창세기 1-3장, 출애굽기 1-2장") - 각 장별 성경 본문: - 기존 bible_passage_controller.js를 활용 - 각 장을 div[data-controller="bible-passage"][data-bible-passage-passage-value="창세기 1장"] 으로 렌더링 - 장 간 구분선 - 맨 아래: "통독 완료" 버튼 (sticky) - 맨 위로 스크롤 버튼 ### 4. BibleReadingsController#batch_create 액션 ```ruby def batch_create chapters = JSON.parse(params[:chapters]) # chapters = [{"book_name": "창세기", "chapter": 1}, ...] chapters.each do |ch| current_user.bible_reading_logs.find_or_create_by( book_name: ch["book_name"], chapter: ch["chapter"], read_date: Date.current ) end redirect_to tongtok_path, notice: "#{chapters.size}장 통독 완료!" end ``` ### 5. 통독 완료 처리 (Stimulus) - app/javascript/controllers/tongtok_reader_controller.js 생성 - "통독 완료" 버튼 클릭 시: - 선택된 장 정보를 hidden field에 담아 POST /bible_readings/batch 전송 - 완료 후 통독 현황 페이지로 리다이렉트 ### 6. 테스트 - test/controllers/tongtok_controller_test.rb에 read 액션 테스트 추가: - 선택 없이 접근 시 리다이렉트 - 정상 선택 시 페이지 렌더링 - test/controllers/bible_readings_controller_test.rb에 batch_create 테스트 추가: - 다중 장 일괄 저장 - 중복 저장 방지 ## 디자인 참고 - 읽기 페이지는 깔끔한 읽기 모드 (책 읽듯이) - 본문 텍스트: text-body leading-relaxed - 절 번호: sup 태그로 작게 표시 - 장 제목: text-heading font-semibold border-b - 플로팅 "통독 완료" 버튼: sticky bottom, bg-brand-primary text-white ## 담당 파일 (다른 파일 수정 금지) - config/routes.rb (수정 - 2줄 추가) - app/controllers/tongtok_controller.rb (수정 - read 액션 + parse_selections) - app/controllers/bible_readings_controller.rb (수정 - batch_create 액션) - app/views/tongtok/read.html.erb (생성) - app/javascript/controllers/tongtok_reader_controller.js (생성) - test/controllers/tongtok_controller_test.rb (수정) - test/controllers/bible_readings_controller_test.rb (수정) ## 완료 기준 - /tongtok/read?selections=창세기:1,2 접근 시 성경 본문 표시 - 선택 없이 접근 시 리다이렉트 - "통독 완료" 클릭 시 선택한 장들이 BibleReadingLog에 저장 - 저장 후 통독 현황 페이지로 리다이렉트 + 성공 메시지 - 기존 테스트 깨지지 않을 것 - 새 테스트 통과