Crowny Church — 성경 + 퀴즈 + 교회별 청정 유튜브
개요
church.crowny.org에 성경 읽기 기능, 성경 퀴즈(교단 성경고사) 기능, 그리고 교회마다 자체 큐레이션 한 청정 유튜브 시청 페이지를 추가했다. 다음세대(NextGen) 페이지의 "준비 중" 블록을 실제 기능으로 교체하고, 설교 페이지에서도 청정 시청 페이지로 바로 이어지게 했다.
무엇을 했는가
1. 성경 라이브러리 (src/lib/bible.ts)
getTodayPlan(day): 1년 365일 통독 플랜 — 매일 구약·시편·신약 3개 본문 자동 분배getVerseOfDay(day): 오늘의 말씀 로테이션loadBibleProgress() / markChapterRead(): localStorage 진행도 관리2. 퀴즈 라이브러리 (src/lib/quiz.ts)
- 5개 카테고리: 구약(ot), 신약(nt), 성경 인물(person), 성경 지명(place), 기본교리(doctrine)
- QUIZ_QUESTIONS: 36문제 (난이도 하/중/상, 4지선다, 해설+성경구절 포함)
recordAnswer(): 정답 시 난이도×5pt 적립, 오답 시 오답노트에 자동 추가shuffleQuestions()/getQuestionsByCategory(): 랜덤화·필터링
3. 교회별 청정 유튜브 라이브러리 (src/lib/church-videos.ts)
buildEmbedUrl(): youtube-nocookie.com + rel=0&modestbranding=1&iv_load_policy=3buildThumbnailUrl(), countByCategory(), filterVideos()4. 성경 페이지 (src/pages/platform/BiblePage.tsx)
- 경로:
/#/bible - 오늘의 말씀 카드 (다크 그라디언트 + 금색 레이블)
- 오늘의 일독 플랜 (3개 본문 태그)
- 나의 읽기 현황 4지표: 읽은 장/진행률/연속 일수/적립금 + 진행바
- 66권 책 목록 — 구약/신약 필터, 책별 진행률 바 (0~100%)
- 장 선택 + 본문 읽기 + "읽기 완료 +10pt" 버튼
- 이전/다음 장 네비, 읽은 장 체크 마크
5. 퀴즈 페이지 (src/pages/platform/QuizPage.tsx)
- 경로:
/#/quiz - 홈 뷰: 통계 4지표 + "랜덤 10문제 풀이" 챌린지 + 5개 카테고리 카드
- 오답노트 섹션 (틀린 문제 수 + 재도전 버튼)
- 풀이 뷰: 진행바, 난이도 배지, 4지선다, 제출 → 해설 펼침 (정답/오답 색상 구분)
- A/B/C/D 원형 버튼, 정답이면 +난이도×5pt, 오답이면 오답노트 자동 등록
6. 교회 전용 시청 페이지 (src/pages/portal/WatchPage.tsx)
/#/{slug}/watch — 156개 모든 교회 대응youtube-nocookie.com + rel=0 파라미터)referrerPolicy="strict-origin-when-cross-origin" + allow 속성 최소화7. 다음세대 페이지 전면 개편 (src/pages/portal/NextGenPage.tsx)
- 기존 "준비 중" 블록 4개 제거
- 성경읽기 카드 — 실시간 내 진행도(읽은 장/연속 일수/적립금) +
navigatePlatform('bible') - 성경고사 퀴즈 카드 — 풀이/정답/오답노트 수치 +
navigatePlatform('quiz') - 적립금 시스템: 성경/퀴즈 점수 규칙을 한눈에, 내 총 적립금 상단 표기
8. 설교 페이지 → 시청 페이지 링크 (src/pages/portal/SermonsPage.tsx)
getChurchVideos(slug)로 큐레이션 영상 존재 여부 확인- 큐레이션이 있으면 "청정 시청으로 보기 →" 버튼 (금색 CTA)
- 유튜브 채널 링크는 보조 버튼으로 축소
9. 라우터 + 네비게이션
PlatformRoute에'bible' | 'quiz'추가ChurchPage에'watch'추가App.tsx: BiblePage, QuizPage, WatchPage 임포트 + switch 케이스 추가PlatformLayout: "성경", "퀴즈" 네비 항목 추가 (모바일 햄버거 포함)ChurchLayout: "시청" 네비 항목 추가
관련 파일
신규:
/Users/ef/crowny-church/src/lib/bible.ts— 성경 데이터 + 진행도 (280줄)/Users/ef/crowny-church/src/lib/quiz.ts— 퀴즈 36문제 + 진행도 (260줄)/Users/ef/crowny-church/src/lib/church-videos.ts— 영상 큐레이션 + 청정 임베드/Users/ef/crowny-church/src/pages/platform/BiblePage.tsx/Users/ef/crowny-church/src/pages/platform/QuizPage.tsx/Users/ef/crowny-church/src/pages/portal/WatchPage.tsx
/Users/ef/crowny-church/src/lib/router.ts— PlatformRoute + ChurchPage 확장/Users/ef/crowny-church/src/App.tsx— 3개 신규 페이지 라우팅/Users/ef/crowny-church/src/components/portal/PlatformLayout.tsx— 성경/퀴즈 네비/Users/ef/crowny-church/src/components/portal/ChurchLayout.tsx— 시청 네비/Users/ef/crowny-church/src/pages/portal/NextGenPage.tsx— 실제 기능으로 연결/Users/ef/crowny-church/src/pages/portal/SermonsPage.tsx— 청정 시청 CTA 추가
빌드 결과
npx tsc --noEmit통과npm run build성공 — 707KB (gzip 180KB), 97 모듈- 성경/퀴즈 데이터는 localStorage에 저장 (로그인 없이도 개인 진행도 유지)
청정 시청 환경 구현 요점
- 도메인:
youtube.com대신youtube-nocookie.com사용 → 광고 추적 쿠키 차단 - 관련 동영상 차단:
rel=0(동일 채널만 노출되도록 제한) - 브랜딩 축소:
modestbranding=1(유튜브 로고 축소) - 주석 차단:
iv_load_policy=3 - 사용자 경로: 설교/시청 탭 → 앱 내에서 재생 종료 → 유튜브 홈으로 튕기지 않음
- 교회 큐레이션: 관리자가 선택한 영상 id만 DB에 저장 → 알고리즘 추천 완전 제거
잔여 이슈
- 성경 본문 전문 라이선스 필요 — 현재는 36개 암송 구절만 수록, 전체 개역개정 본문은 협약 후 순차 공개
- 퀴즈 문제 36개 → 교단 교재 1~6월 전체 커버까지 200+ 문제로 확장 필요
- 교회별 실제 유튜브 id 수집·큐레이션 필요 (현재 CTC 샘플 엔트리만 있음 — youtubeId는 공란)
- 교회 관리자용 영상 큐레이션 CMS 페이지 (현재는 church-videos.ts에 하드코딩)
- 유튜브 Data API 연동 — 교회 채널에서 최신 영상 자동 가져오기 (수동 선별 옵션 유지)
- 번들 사이즈 707KB — 교회 데이터 + 성경/퀴즈 데이터가 누적 중, 동적 import 고려
- 적립금 → 실제 교회 선물 교환 로직 (현재는 기록만)
- 로그인 시 localStorage를 계정 동기화로 승격 (여러 기기 진행도 공유)