ID: key_26_22_05_25_P3_3_6 Created date: 5월 25 2026 월요일
연관 문서
개발 일정 > Phase 3 모바일 (React Native) | 모바일 개발
개요
React Native 기반 모바일 프로젝트의 초기 구조를 설정한다.
네비게이션, 상태 관리, API 클라이언트 기반을 구축한다.
- 예상 소요: 1~2일
- 선행 조건: 모바일 (React Native) 사전 정의 완료
- 완료 기준: Expo Go 또는 시뮬레이터에서 앱 기동 확인
Claude Code 작업 수행서
작업 지시
CIRA 모바일 앱 프로젝트를 초기 설정해줘.
[기술 스택]
- React Native + Expo (Expo Router v3 — file-based routing)
- TypeScript strict 모드
- NativeWind (Tailwind for RN) 또는 StyleSheet
[수행 작업]
1. 프로젝트 생성
npx create-expo-app cira-mobile --template expo-template-blank-typescript
2. 필수 패키지 설치
- expo-router (네비게이션)
- @tanstack/react-query (서버 상태)
- zustand (클라이언트 상태)
- axios (HTTP)
- expo-secure-store (토큰 저장 — Keychain/Keystore)
- react-native-safe-area-context
- react-native-screens
- @expo/vector-icons
3. 디렉토리 구조 구성
app/
├── (auth)/
│ ├── login.tsx
│ └── _layout.tsx
├── (main)/
│ ├── _layout.tsx (탭 네비게이션)
│ ├── index.tsx (대시보드)
│ ├── issues/
│ │ ├── index.tsx
│ │ └── [id].tsx
│ └── profile.tsx
└── _layout.tsx (루트 레이아웃 — QueryClient, 인증 가드)
src/
├── api/ (axios 인스턴스 + API 함수)
├── hooks/
├── store/
├── types/
└── components/
├── ui/ (Button, Input, Card 등)
└── issue/
4. 인증 토큰 관리
- expo-secure-store에 accessToken / refreshToken 저장
- useAuthStore (Zustand): { token, setToken, clearToken }
- axios 인터셉터: 요청에 토큰 자동 주입
- 401 응답 시 토큰 갱신 또는 로그인 화면 이동
5. 인증 가드 구현
- app/_layout.tsx 에서 useAuthStore 구독
- 토큰 없을 시 (auth)/login 리다이렉트
- Expo Router useSegments + router.replace 활용
6. 공통 UI 컴포넌트 기초
- CiraButton (primary / secondary / danger 스타일)
- CiraInput (label, errorMessage 포함)
- CiraCard
- LoadingSpinner
- EmptyState
7. 환경변수 설정
app.config.ts:
- EXPO_PUBLIC_API_BASE_URL
- .env.local.example 생성
8. 개발 환경 검증
- iOS 시뮬레이터 / Android 에뮬레이터에서 기동 확인
- API 서버 연결 테스트 (health check 엔드포인트)
완료 기준
| 항목 | 기준 |
|---|---|
| 앱 기동 | 시뮬레이터에서 정상 실행 |
| 네비게이션 | 탭 + 스택 기본 동작 |
| 토큰 저장 | SecureStore 읽기/쓰기 정상 |
| API 연결 | 서버 health 엔드포인트 응답 확인 |
| 공통 컴포넌트 | 6종 렌더링 확인 |