TurtleMode

집중력 향상을 위한 앱 차단 애플리케이션입니다.

현재 상태: UI 프로토타입 (프론트엔드만 구현됨)

현재 구현된 기능

화면 (UI)

• 로그인 화면 - Google 로그인 버튼 (UI만 구현)
• 온보딩 화면 - 앱 소개 슬라이드 3장
• 권한 요청 화면 - 앱 권한 안내 UI
• 대시보드 - 집중 타이머 UI, 주간 차트, 퀵 액션 버튼
• 앱 차단 - 차단 그룹 생성/관리, 앱 선택 모달
• 알림 설정 - 알림 앱 목록 UI (빈 상태)
• 프로필 - 사용자 정보, 메뉴 목록, 로그아웃

상태 관리

• useAuthStore - 로그인 상태, 사용자 정보 관리
• useBlockingStore - 차단 그룹 CRUD

미구현 기능

• 실제 Google 로그인 연동
• 네이티브 앱 차단 기능 (Android UsageStatsManager 등)
• 백엔드 서버 연동
• 실제 앱 사용 시간 추적
• 푸시 알림

기술 스택

• React Native (Expo SDK 54)
• TypeScript
• Zustand - 상태 관리
• React Navigation - 네비게이션
• Lucide React Native - 아이콘
• Expo Linear Gradient - 그라데이션

프로젝트 구조

TurtleMode/
├── app/                     # 메인 애플리케이션
│   ├── src/
│   │   ├── core/
│   │   │   ├── navigation/       # 네비게이션 설정
│   │   │   │   ├── AuthNavigator.tsx
│   │   │   │   ├── MainTabNavigator.tsx
│   │   │   │   ├── RootNavigator.tsx
│   │   │   │   └── types.ts
│   │   │   └── store/            # Zustand 스토어
│   │   │       ├── useAuthStore.ts
│   │   │       └── useBlockingStore.ts
│   │   │
│   │   ├── features/
│   │   │   ├── auth/screens/
│   │   │   │   ├── LoginScreen.tsx
│   │   │   │   ├── OnboardingScreen.tsx
│   │   │   │   └── PermissionScreen.tsx
│   │   │   ├── blocking/screens/
│   │   │   │   └── BlockingScreen.tsx
│   │   │   ├── dashboard/screens/
│   │   │   │   └── DashboardScreen.tsx
│   │   │   ├── notification/screens/
│   │   │   │   └── NotificationScreen.tsx
│   │   │   └── profile/screens/
│   │   │       └── ProfileScreen.tsx
│   │   │
│   │   └── shared/theme/         # 테마 (색상, 스타일)
│   │       ├── colors.ts
│   │       ├── index.ts
│   │       └── styles.ts
│   │
│   ├── assets/
│   │   ├── images/
│   │   │   └── mascot.png        # 거북이 마스코트
│   │   │   └── turtle.png
│   │   ├── icon.png
│   │   ├── splash-icon.png
│   │   ├── adaptive-icon.png
│   │   └── favicon.png
│   │
│   ├── App.tsx
│   ├── index.ts
│   ├── app.json
│   ├── package.json
│   └── tsconfig.json
│
└── README.md

시작하기

요구사항

• Node.js 18+
• npm
• Expo Go 앱 (모바일 테스트용)

설치 및 실행

# 의존성 설치
cd app
npm install

# 개발 서버 시작
npm start

모바일에서 실행 (Expo Go)

1. Expo Go 앱 설치

   • Android: Google Play Store
   • iOS: App Store

2. 앱 실행

   • npm start 실행 후 터미널에 QR 코드가 표시됨
   • Android: Expo Go 앱 실행 → Scan QR code 탭 → QR 코드 스캔
   • iOS: 기본 카메라 앱으로 QR 코드 스캔 → Expo Go에서 열기

3. 같은 네트워크 필수

   • PC와 모바일이 같은 Wi-Fi에 연결되어 있어야 함
   • 연결이 안 되면 터미널에서 s를 눌러 Expo Go로 전환

다른 실행 방법

# Android 에뮬레이터
npm run android

# iOS 시뮬레이터 (macOS만)
npm run ios

# 웹 브라우저
npm run web

트러블슈팅

캐시 관련 에러 발생 시:

# Windows PowerShell
Remove-Item -Recurse -Force node_modules
npm install
npx expo start --clear

배포 방법

앱을 실제로 배포하는 방법은 DEPLOYMENT.md를 참고하세요.

주요 배포 옵션:

• Expo Go: 개발/테스트용 (현재 사용 중)
• EAS Build: 앱 스토어 배포용 빌드
• Google Play / App Store: 실제 상용 배포

자세한 설정 방법, 비용 정보, 단계별 가이드는 배포 문서에서 확인할 수 있습니다.

라이선스

MIT License