오프라인 묵상 프론트엔드 (IndexedDB + Stimulus + Service Worker)
ID: fb191778-a76c-4765-9134-92c429721af7
## 목표
오프라인에서 묵상 기록을 작성/저장하고, 온라인 복귀 시 자동 동기화하는 프론트엔드 구현
## 구현 내용
### 1. IndexedDB 래퍼 모듈 (`app/javascript/lib/offline_store.js`)
- IndexedDB 'logbible' 데이터베이스 생성 (version 1)
- 'pending_meditations' object store: { id(auto), qt_content_id, meditation_date, personal_meditation, action_plan, prayer_topic, mood_after, is_tongtok_completed, created_at, synced }
- CRUD 메서드: save(), getAll(), getPending(), markSynced(), delete()
- importmap에 등록
### 2. offline_sync Stimulus 컨트롤러 (`app/javascript/controllers/offline_sync_controller.js`)
- data-controller="offline-sync"를 묵상 폼에 추가
- 온라인/오프라인 상태 감지 (navigator.onLine + online/offline 이벤트)
- 오프라인 시 폼 제출 가로채기: IndexedDB에 저장 + 성공 메시지 표시
- 온라인 복귀 시 자동 동기화: pending entries를 POST /qt/meditations/sync로 전송
- 동기화 상태 표시: 배지/아이콘으로 "N건 동기화 대기" 표시
### 3. Service Worker 캐시 확장 (`app/views/pwa/service-worker.js`)
- QT 페이지 캐시 전략 추가: /qt/today, /qt/day?day=N 페이지를 Network First + Cache Fallback
- 기존 precache에 추가하지 말고, 동적 캐시로 처리 (방문한 페이지만 캐시)
- 캐시 이름: 'qt-pages-v1'
- 오프라인 시 캐시된 QT 페이지 제공 (기존 offline.html 대신)
### 4. 오프라인 상태 UI
- 오프라인 배너: 상단에 "오프라인 모드 - 묵상이 로컬에 저장됩니다" 표시
- 동기화 진행 표시: "동기화 중..." → "동기화 완료" 토스트
- 묵상 폼에 로컬 저장 아이콘 표시 (오프라인 시)
- 디자인 시스템 활용: shared/_card, shared/_badge 파셜 패턴 참고
### 5. 묵상 폼 수정 (`app/views/qt/meditations/_form.html.erb`)
- 폼에 data-controller="offline-sync" 추가
- data-action="submit->offline-sync#handleSubmit" 추가
- 동기화 상태 표시 영역 추가
## 파일 목록 (이 파일들만 수정/생성)
- `app/javascript/lib/offline_store.js` (생성)
- `app/javascript/controllers/offline_sync_controller.js` (생성)
- `app/views/pwa/service-worker.js` (수정 - 캐시 전략 추가만)
- `app/views/qt/meditations/_form.html.erb` (수정 - data attributes 추가)
- `app/views/qt/today.html.erb` (수정 - 오프라인 배너 추가)
- `config/importmap.rb` (수정 - offline_store 핀 추가)
## 주의사항
- Importmap 환경: npm 패키지 사용 불가, 순수 JS만 사용
- 기존 Stimulus 컨트롤러 패턴 참고 (app/javascript/controllers/)
- Tailwind CSS v4 사용 중 (app/assets/tailwind/application.css 참고)
- 기존 Service Worker 구조 유지하면서 확장 (덮어쓰기 금지)
- turbo:submit-end 이벤트 활용 가능
- 테스트는 백엔드 에이전트가 담당 (프론트엔드는 구현만)
첨부 이미지
이미지 추가 (Ctrl+V로 붙여넣기 또는 클릭)
JPEG, PNG, GIF, WebP / 최대 10MB
활동 로그
-
팀팀리드 상태 변경: 리뷰 → 완료
2026년 03월 03일 05:40:35
-
Ooffline-frontend 상태 변경: 할 일 → 리뷰
2026년 03월 03일 05:30:32
-
Ooffline-frontend 프론트엔드 구현 완료
2026년 03월 03일 05:30:32
상세 보기
## 변경 사항
### 새 파일
- `app/javascript/lib/offline_store.js` - IndexedDB 래퍼 모듈 (logbible-offline DB, pending_meditations store)
- `app/javascript/controllers/offline_sync_controller.js` - 오프라인 동기화 Stimulus 컨트롤러### 수정 파일
- `app/views/pwa/service-worker.js` - QT 페이지 Network First 캐시 전략 추가 (qt-pages-v1 캐시)
- `app/views/qt/meditations/_form.html.erb` - offline-sync 컨트롤러 연동, 오프라인 폼 제출 가로채기
- `app/views/qt/today.html.erb` - 오프라인 배너 UI 추가 (amber 색상, 동기화 대기 건수 표시)
- `config/importmap.rb` - lib/ 디렉토리 pin 추가### 기능
- IndexedDB에 오프라인 묵상 자동 저장
- 온라인 복귀 시 POST /qt/meditations/sync로 자동 동기화
- QT today/day 페이지 Network First 캐시 (오프라인에서도 캐시된 페이지 열람)
- 오프라인 상태 배너 + 동기화 대기 건수 표시### 테스트
- QT 관련 테스트 62개 전체 통과 (sync 테스트 5개는 백엔드 구현 대기) -
Ooffline-frontend 프론트엔드 구현 시작
2026년 03월 03일 05:26:25