Client: Stimulus 컨트롤러 + sessionStorage + 라운드 전환
ID: 5e4a64e1-2f4e-44ba-afff-501b820f0705
## 목표
Big5 진단의 라운드별 AJAX 제출을 클라이언트 누적 + 최종 1회 제출로 변경.
## ⚠️ 리뷰 반려 사유 (2026-03-09)
### [MUST-FIX] 접근성 ARIA 속성 누락
- 질문 카드에 `role="radio"`, `aria-checked` 없음
- 컨테이너에 `role="radiogroup"` 없음
- neither 버튼에 `aria-label` 없음
- 카운트다운에 `role="timer"`, `aria-live="polite"` 없음
- 선택 시 `aria-checked="true"` 상태 변경 필요
### [MUST-FIX] JS 내 한국어 텍스트 하드코딩
- `_showSubmitting()`, `_showComplete()`, `_showError()` 내 텍스트가 한국어만
- 4개 언어(ko, en, zh, vi) 지원인데 i18n 미적용
- **수정**: Stimulus value로 번역 텍스트 전달 또는 서버 렌더링 `` 사용
### [MUST-FIX] 타임아웃 자동 스킵 피드백 부재
- 30초 경과 시 자동으로 다음 라운드로 넘어가지만 사용자 안내 없음
- 토스트 메시지 또는 안내 텍스트 필요
---
## 작업 내용
(이하 기존 내용 동일)
### 1. Stimulus 컨트롤러: big5_batch_controller.js
### 2. 클라이언트 라운드 전환
### 3. sessionStorage 폴백
### 4. 뷰 수정
## 완료 기준
- 반려 사유 3건 모두 수정
- ARIA 접근성 테스트 확인
- 4개 언어에서 UI 텍스트 정상 표시
- 기존 기능 동작 유지
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 재리뷰 완료 - 승인 (Client: Stimulus 컨트롤러)
2026년 03월 09일 07:16:28
상세 보기
## 리뷰 결과
- 상태: 승인
- 코드 품질: 반려사유 3건 모두 수정 확인 (ARIA 접근성, i18n 7개 value, 타임아웃 토스트)
- 보안: PASS — innerHTML은 _escapeHTML()로 보호, 토스트는 textContent 사용, ERB 자동 이스케이프 적용
- i18n: 4개 언어(ko, en, zh, vi) 모두 7개 키 존재 확인 -
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 09일 07:16:21
-
Ffrontend-dev 반려 사유 3건 수정 완료
2026년 03월 09일 07:13:17
상세 보기
## 변경 사항
### big5_batch_controller.js
- ARIA: role="radiogroup", role="radio", aria-checked 추가
- ARIA: neither 버튼에 aria-label 추가
- ARIA: selectCard()/selectNeither()에서 aria-checked 토글
- i18n: 7개 Stimulus value 추가 (submittingText, completeTitle 등)
- i18n: _showSubmitting/_showComplete/_showError의 하드코딩 텍스트를 value로 교체
- 타임아웃: _showTimeoutToast() 메서드 추가, 1.5초 토스트 표시 후 다음 라운드 전환### big5_show.html.erb
- 카운트다운에 role="timer" aria-live="polite" 추가
- 7개 data-big5-batch-*-value 속성 추가 (t() 헬퍼로 번역 전달)### i18n 파일 (4개 언어)
- diagnosis.big5.batch.* 키 추가 (ko, en, zh, vi) -
Ffrontend-dev 상태 변경: 진행 중 → 리뷰
2026년 03월 09일 07:13:02
-
팀팀리드 리뷰 완료 - 반려 (Client: Stimulus 컨트롤러)
2026년 03월 09일 07:05:40
상세 보기
## 리뷰 결과
- 상태: 반려
- bin/ci: 통과## 코드 품질
- sessionStorage crash recovery 잘 구현됨
- XSS 방어 (_escapeHTML) 적절
- catch 블록 에러 무시 (medium) — console.warn 추가 권장## 보안
- CSRF 토큰 헤더 전송 OK
- sessionStorage 동일 탭 한정 OK## UX/UI
- [MUST-FIX] 진단 카드 ARIA 속성 누락 (role="radio", aria-checked, role="radiogroup")
- [MUST-FIX] locale_dropdown ARIA 누락 (aria-expanded, role="menu")
- [MUST-FIX] JS 내 한국어 텍스트 하드코딩 — 4개 언어 지원인데 i18n 미적용
- [MUST-FIX] 타임아웃 자동 스킵 시 사용자 피드백 없음## 수정 필요 사항
- ARIA 접근성 속성 추가
- Stimulus value로 번역 텍스트 전달 또는 서버 렌더링 template 사용
- 타임아웃 스킵 토스트 메시지 추가 -
팀팀리드 상태 변경: 리뷰 → 진행 중
2026년 03월 09일 07:04:49
-
Cclient-dev Stimulus 컨트롤러 구현 완료
2026년 03월 09일 02:15:41
상세 보기
## 변경 파일
### 새 파일
- `app/javascript/controllers/big5_batch_controller.js` — Big5 일괄 처리 Stimulus 컨트롤러### 수정 파일
- `app/controllers/diagnosis_sessions_controller.rb` — `prepare_all_big5_rounds` + `generate_big5_round_sequence` private 메서드 추가, show 액션에 1줄 추가
- `app/views/diagnosis_sessions/big5_show.html.erb` — batch mode로 전면 재작성 (big5-batch 컨트롤러 사용)
- `app/views/diagnosis_sessions/_big5_guide.html.erb` — 시작 버튼 action을 big5-batch#startDiagnosis으로 변경## 주요 구현 내용
### Stimulus 컨트롤러 (big5_batch_controller.js)
- 서버에서 모든 라운드 데이터를 JSON으로 받아 클라이언트에서 라운드 전환 (서버 왕복 0회)
- 카드 선택 → 시각 피드백(250ms) → 자동 다음 라운드
- "둘 다 해당 안됨" 버튼 지원
- 30초 카운트다운 타이머 (5초 이하 빨간색 경고)
- 타임아웃 시 자동으로 "neither"로 제출### sessionStorage 관리
- 키: `big5_session_${sessionId}`
- 매 라운드 선택 시 자동 저장 (currentRound + responses 배열)
- 페이지 새로고침 시 복원하여 이어하기
- 완료 시 자동 삭제### 최종 제출
- 마지막 라운드 완료 → fetch POST `/submit_all_big5_responses` (JSON)
- 성공: server redirect_url → Turbo.visit(), 또는 완료 화면 표시
- 실패: 에러 화면 + "다시 시도" 버튼### 라운드 사전 생성 (서버)
- `prepare_all_big5_rounds`: session ID 시드 기반 결정론적 RNG 사용
- 페이지 새로고침해도 같은 라운드 순서 (sessionStorage 호환)
- N+1 방지: `includes(:translations)` 사용
- 번역 없는 문항 자동 필터링## 주의 사항
- backend-dev의 `submit_all_big5_responses` 액션이 submitted_ids == valid_question_ids 검증 사용 중. 클라이언트는 90개(60긍정 + 30선택부정)만 보내는데, valid는 105개(45부정 포함)이므로 검증 불일치 가능. 검증 로직 조정 필요.## 테스트
- 기존 controller 테스트 6개 모두 통과
- 전체 테스트 847개 중 기존 실패(custom_payments, diagnosis_e2e) 외 추가 실패 없음 -
Cclient-dev 상태 변경: 할 일 → 리뷰
2026년 03월 09일 02:15:18
-
Cclient-dev Stimulus 컨트롤러 구현 시작
2026년 03월 09일 02:02:41
상세 보기
## 작업 시작
- Big5 일괄 처리 Stimulus 컨트롤러 구현
- sessionStorage 백업/복원
- 클라이언트 라운드 전환
- 최종 일괄 제출 (fetch POST)