Crowny Church — 성경 + 퀴즈 + 교회별 청정 유튜브

개요

church.crowny.org에 성경 읽기 기능, 성경 퀴즈(교단 성경고사) 기능, 그리고 교회마다 자체 큐레이션 한 청정 유튜브 시청 페이지를 추가했다. 다음세대(NextGen) 페이지의 "준비 중" 블록을 실제 기능으로 교체하고, 설교 페이지에서도 청정 시청 페이지로 바로 이어지게 했다.

무엇을 했는가

1. 성경 라이브러리 (`src/lib/bible.ts`)

BIBLE_BOOKS: 66권 전체 메타데이터 (id, 한글명, 영문명, 약어, 구/신약, 카테고리, 장수)

KEY_VERSES: 암송/일일 말씀용 36개 대표 구절

getTodayPlan(day): 1년 365일 통독 플랜 — 매일 구약·시편·신약 3개 본문 자동 분배

getVerseOfDay(day): 오늘의 말씀 로테이션

loadBibleProgress() / markChapterRead(): localStorage 진행도 관리

읽은 장 목록, 연속 일수, 누적 적립금, 7일 연속 +50pt 보너스

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`)

VideoCategory: 8개 (설교/찬양/간증/교육/다음세대/기도회/선교/공지)

CuratedVideo: 교회가 직접 고른 영상 구조 (유튜브 id, 카테고리, 설교자, 날짜, 고정 여부)

buildEmbedUrl(): youtube-nocookie.com + rel=0&modestbranding=1&iv_load_policy=3

관련 동영상 비활성화, 유튜브 로고 최소화, 주석 끄기 → 알고리즘 차단

buildThumbnailUrl(), 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개 모든 교회 대응

청정 시청 안내 배너 (알고리즘·트래킹 차단 설명)

메인 iframe 플레이어 (youtube-nocookie.com + rel=0 파라미터)

referrerPolicy="strict-origin-when-cross-origin" + allow 속성 최소화

카테고리 필터 (전체/설교/찬양/…) — 영상 개수 배지 포함

영상 카드 리스트: 썸네일(i.ytimg.com) + 고정 배지 + 길이 + 설교자/날짜

등록된 영상 없을 때: "큐레이션 된 영상이 아직 없습니다" + 유튜브 채널 바로가기

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: "시청" 네비 항목 추가

빌드 결과

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를 계정 동기화로 승격 (여러 기기 진행도 공유)

Crowny Church — 성경 + 퀴즈 + 교회별 청정 유튜브

개요

무엇을 했는가

1. 성경 라이브러리 (src/lib/bible.ts)

2. 퀴즈 라이브러리 (src/lib/quiz.ts)

3. 교회별 청정 유튜브 라이브러리 (src/lib/church-videos.ts)

4. 성경 페이지 (src/pages/platform/BiblePage.tsx)

5. 퀴즈 페이지 (src/pages/platform/QuizPage.tsx)

6. 교회 전용 시청 페이지 (src/pages/portal/WatchPage.tsx)

7. 다음세대 페이지 전면 개편 (src/pages/portal/NextGenPage.tsx)

8. 설교 페이지 → 시청 페이지 링크 (src/pages/portal/SermonsPage.tsx)