★★★★★
#UI·디자인 · claude-code
Cross-platform Firebase 공유
상황: Next.js(웹) + Flutter(모바일) 두 앱이 같은 Firebase 프로젝트 사용
#Next.js#Flutter#Firestore#멀티플랫폼
변수 1개 — 여기 채우면 아래 프롬프트에 바로 들어가요
상황: Next.js(웹) + Flutter(모바일) 두 앱이 같은 Firebase 프로젝트 사용
공유 구조:
```
Firebase 프로젝트: {{firebaseProjectId}}
├─ Web App (Next.js/Hosting)
└─ Mobile Apps (Flutter iOS/Android)
```
필수 설정:
1. **Firebase Console에 앱 등록**:
- Web → google-config.js (또는 환경변수)
- iOS → GoogleService-Info.plist
- Android → google-services.json
2. **Firestore Security Rules 통합 인증**:
```
rules_version = '2';
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
allow read: if request.auth != null;
allow write: if request.auth.uid == <doc-owner-field>;
}
}
}
```
3. **인증 제공업체 공통**:
- Google/Apple: 웹과 모바일 동시 활성화
- Kakao: 웹은 REST API, 모바일은 SDK (분리)
4. **배포 순서**:
- Firestore Rules: `firebase deploy --only firestore:rules`
- Storage Rules: `firebase deploy --only storage`
- Cloud Functions: 양쪽 앱에서 호출 가능
- Hosting: `firebase deploy --only hosting`
검증: 웹에서 로그인 → 같은 uid로 모바일 로그인 → Firestore 데이터 공유 확인
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.