BrideVOCA

2명의 아이(다온, 지온)가 각자의 iPad에서 사용하는 가족 영어 단어 학습 앱. 마법 아카데미 테마의 Day 기반 학습 루프: Learn → Test → Review → Character 성장.

주요 기능

• Day 기반 학습: 20단어 카드 학습 → 4지선다 테스트 (EN↔KO 혼합)
• 누적 오답 기반 복습 시스템
• 캐릭터 성장 (XP / Level / Streak)
• 프로필별 테마 (다온: amber/warm, 지온: sky/cool)
• TTS + MP3 발음 재생
• SFX 효과음 + BGM 배경음악

기술 스택

• Framework: Next.js 16 (App Router), React 19, TypeScript 5.9
• Styling: Tailwind CSS 4
• Backend: Firebase (Auth, Firestore)
• Testing: Vitest + Testing Library + Playwright
• Deploy: Vercel → iPad PWA (홈 화면 설치)

실행

npm install
npm run dev

브라우저에서 http://localhost:3000을 열면 됩니다.

커맨드

npm run dev          # 개발 서버
npm run build        # 프로덕션 빌드
npm run lint         # ESLint (--max-warnings=0)
npm run typecheck    # tsc --noEmit
npm test             # Vitest (단일 실행)
npm run test:watch   # Vitest (watch 모드)
npm run test:e2e     # Playwright E2E 테스트

환경변수

Firebase 연동을 위해 .env.local에 아래 키가 필요합니다. (.env.example 참고)

NEXT_PUBLIC_FIREBASE_API_KEY=
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=
NEXT_PUBLIC_FIREBASE_PROJECT_ID=
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=
NEXT_PUBLIC_FIREBASE_APP_ID=

환경변수가 없으면 UI는 mock 모드로 동작합니다.

배포

• Vercel에 연결되어 main 브랜치 push 시 자동 배포
• 배포 URL: https://bridevoca.vercel.app
• iPad에서 Safari로 접속 → "홈 화면에 추가"로 PWA 설치
• 가로 모드 전용 (landscape orientation)

콘텐츠

• Day 1-20 (JSON seed 파일)
• Learning Days: 1-4, 6-9, 11-14, 16-19 (각 20단어)
• Checkpoint Test Days: 5, 10, 15, 20
• 콘텐츠 경로: src/content/books/bridge-voca-basic/
• 오디오 에셋: public/audio/tts/