Paper Cat — Expo 앱

웹 프로토타입을 React Native (Expo)로 변환한 모바일 앱입니다.

빠른 시작

cd expo-app
npm install
npx expo start

• iOS 시뮬레이터: i
• Android 에뮬레이터: a
• 실제 기기: Expo Go 앱에서 QR 코드 스캔

구조

expo-app/
├── App.js                # 진입점
├── app.json              # Expo 설정
├── package.json
├── assets/cat/           # 식빵 이미지 (PNG)
└── src/
    ├── theme.js          # 색상·반경·그림자 토큰
    ├── store.js          # AsyncStorage 기반 전역 상태
    ├── components.js     # CatBubble · Card · Chip · ProgressBar · SectionTitle
    ├── Nav.js            # BottomTab + Stack 네비게이션
    └── screens/
        ├── CatAdoptionScreen.js   # 01a 입양 (이름·성격)
        ├── HomeScreen.js          # 02 홈
        ├── StageMapScreen.js      # 03 스테이지 맵 (필수·보너스)
        ├── StorytellingScreen.js  # 04 스토리텔링
        ├── ExploreScreen.js       # 05 탐색
        ├── PaperDetailScreen.js   # 06 논문 상세
        ├── QAChatbotScreen.js     # 07 Q&A 챗봇
        ├── SummaryChallengeScreen.js # 08 한 줄 요약
        ├── StudyScreen.js         # 09 학습
        ├── ProfileScreen.js       # 10 프로필
        └── CollectionScreen.js    # 11 도감

네비게이션

• 루트 스택: CatAdoption → Tabs (Home / Explore / Study / Collection / Profile)
• 학습 흐름: StageMap, Storytelling, PaperDetail, QAChatbot, SummaryChallenge는 탭 위에 스택으로 push되어 탭바를 가리지 않습니다.

저장되는 상태 (AsyncStorage)

• catName · personality (입양 화면에서 선택)
• level · xp · xpToNext · totalXp
• streakDays · hearts · papersDone
• weeklyMinutes · weeklyGoalMinutes
• progress (논문별 0~1)

프로필 → "데이터 초기화"로 전체 리셋.

디자인 토큰

웹 프로토타입과 동일한 팔레트·반경·그림자를 src/theme.js에 매핑했어요. 폰트는 Expo 기본 시스템 폰트를 사용하며, 굵기로 위계를 잡았습니다. (Nunito·Gowun Dodum을 쓰고 싶다면 expo-font + useFonts로 로드)

실 기기로 빌드

npx eas build --platform ios
npx eas build --platform android