CS 전공 개념을 게임처럼 학습하는 모바일 퀴즈 앱입니다. React Native(Expo) 기반으로 개발했으며, 개념을 계층 구조(과목 → 챕터 → 개념)로 분해하고 객관식/OX/단답형/매칭형 4가지 유형의 문제를 자동 생성해 출제합니다.
- iOS / Android / Web 동시 지원 (Expo)
- 백엔드:
codebite-quiz-api— Node.js(Hono) + MongoDB 기반 별도 저장소
| 기능 | 설명 |
|---|---|
| 개념 기반 퀴즈 | 과목 → 챕터 → 개념(트리 구조) 데이터를 바탕으로 4가지 유형(객관식/OX/단답형/매칭형) 문제 출제 |
| 학습 진행도 | 챕터/스테이지 단위 진행률 관리, 학습 완료(Studied) 마킹 |
| 스트릭 & 보상 | 연속 학습일 스트릭 추적, 도토리 재화 보상 |
| 오답 노트 | 틀린 문제를 모아 다시 학습할 수 있는 오답 노트 |
| 랭킹 | 유저 간 학습 성과 랭킹 |
| 캐릭터(도비) | Lottie 기반 감정 표현 애니메이션 캐릭터로 학습 리액션 제공 |
| 북마크 | 관심 개념 저장 및 재조회 |
- 결정론적(deterministic) 퀴즈 생성 — 서버는 퀴즈 상태를 저장하지 않고, 문제 출제 시 발급한
randomSeed만으로 클라이언트와 서버가 동일한 문제 순서·선지를 재현합니다. 채점 시 서버가 같은 seed로 문제를 재생성해 정답을 검증하므로 클라이언트 조작에 안전합니다. - 오답 선지(Distractor) 자동 선택 — 형제 개념과 전역 오답 후보 풀에서 문맥상 그럴듯한 오답을 골라 객관식/매칭형 문제를 구성합니다.
- 퀴즈 풀 페이지네이션 — 대량의 개념 데이터를 페이지 단위로 조회해 초기 로딩 비용을 최소화합니다.
- 클라이언트 상태 관리 분리 — Zustand로 퀴즈 진행(
useQuizStore), 문제 풀(useQuizPoolStore), 스테이지(useStageStore), 과목(useSubjectStore)을 도메인별 스토어로 분리 관리합니다.
상세 설계 문서는
docs/폴더에서 확인할 수 있습니다. (퀴즈 로직, 보상 시스템, 오답 노트, 동적 문제 생성 등)
| 분류 | 기술 |
|---|---|
| 프레임워크 | React Native + Expo ~54 |
| 언어 | TypeScript ~5.9 |
| 라우팅 | Expo Router ~6 (파일 기반 라우팅) |
| 상태 관리 | Zustand ^5 |
| 서버 상태 | TanStack Query ^5 |
| 네트워킹 | Axios |
| 애니메이션 | React Native Reanimated ~4, Lottie |
| 테스트 | Jest + jest-expo |
| 백엔드(별도 저장소) | Hono, MongoDB(Mongoose), Vercel 배포 |
codebite-quiz-app/
├── app/ # 화면 (Expo Router 파일 기반 라우팅)
│ ├── (tabs)/ # 탭 네비게이션 화면
│ ├── quiz/ # 퀴즈 진행 화면
│ └── _layout.tsx # 루트 레이아웃
├── components/
│ ├── home/ # 홈/챕터 목록 UI
│ ├── quiz/ # 문제 유형별 컴포넌트 (객관식/OX/단답형/매칭형), 결과 화면
│ ├── ranking/ # 랭킹 리스트/휠
│ ├── charactor/ # 도비 캐릭터 애니메이션
│ └── common/ # 공통 버튼/모달
├── store/ # Zustand 도메인별 스토어
├── api/ # Axios 인스턴스, API 호출 함수
├── types/ # TypeScript 타입 정의
├── hooks/ # 커스텀 훅
├── docs/ # 퀴즈 로직/보상/오답노트 등 설계 문서
└── assets/ # 이미지, 폰트 등 정적 파일
| 항목 | 버전 |
|---|---|
| Node.js | 18 이상 |
| Yarn | 최신 버전 |
| Expo Go (모바일 테스트용) | App Store / Google Play |
패키지 매니저: 이 프로젝트는 반드시
yarn을 사용합니다.npm install은 사용하지 마세요.
# 의존성 설치
yarn install
# 개발 서버 실행 (QR 코드 제공)
yarn start
# Android 에뮬레이터
yarn android
# iOS 시뮬레이터 (macOS 전용)
yarn ios
# 웹 브라우저
yarn web- 스마트폰에 Expo Go 설치
- 개발 PC와 스마트폰을 같은 Wi-Fi에 연결
yarn start실행 후 터미널의 QR 코드 스캔
# 일반 패키지
yarn add <package-name>
# 개발 전용 패키지
yarn add -D <package-name>
# Expo 호환성이 필요한 패키지 (권장)
npx expo install <package-name>
package-lock.json은 생성하거나 커밋하지 마세요.
yarn lint # 코드 검사
yarn test # 테스트 실행# Metro 캐시 초기화
yarn start --clear
# 의존성 재설치
rm -rf node_modules
yarn install
# 프로젝트 초기화 (스타터 코드 제거)
yarn reset-project