★★★★★
#UI·디자인 · claude-code
Google Drive 사진 공유 통합
프로젝트: {{appName}}
#Google Drive#Firebase Storage#lh3 CDN
변수 2개 — 여기 채우면 아래 프롬프트에 바로 들어가요
프로젝트: {{appName}}
Firebase Storage: {{storageBucket}}
Google Drive로 사진을 공유해야 해 (Toogether 패턴, docs/drive-photo.md).
아키텍처:
- **Firebase Storage**: 썸네일 (300px, 40KB) — 내 비용
- **Google Drive**: 원본 — 사용자 Drive 용량 (내 비용 0)
- **HD 보기**: lh3.googleusercontent.com CDN
단계:
1. 사진 업로드 플로우:
- 클라이언트 리사이즈 (300px, isolate) → Firebase Storage 업로드
- Firestore에 메타 저장 (즉시 타임라인 노출)
- Google Drive API로 원본 비동기 업로드
- Drive 공유 권한 설정 (`permissions.create(type: 'anyone', role: 'reader')`)
- Firestore에 `driveFileId` 저장
2. HD 보기 (클라이언트):
```dart
// Drive URL: https://lh3.googleusercontent.com/d/{fileId}
final url = 'https://lh3.googleusercontent.com/d/$driveFileId';
final response = await http.get(Uri.parse(url));
// CachedNetworkImage 불가 (303 리다이렉트) → Image.memory 직접 사용
Image.memory(response.bodyBytes)
```
3. **중요 반복 실수** (글로벌 #29):
- addPhoto doc ID ≠ photoId
- 해결: `.doc(photo.photoId).set()`로 doc ID = photoId 보장
4. 보안:
- Firestore Rules: 여행 멤버만 driveFileId 조회 가능
- Drive 공유 링크 유출돼도 여행 사진 수준 리스크
검증: HD 보기 클릭 → 1024px 이미지 로딩 + 캐싱 확인
쓰는 법 — 위 칸에 본인 값을 채우면 아래 프롬프트에 바로 반영돼요. 복사 버튼을 누르면 채워진 그대로 클립보드에 담기니까, claude-code(또는 본인이 쓰는 AI)에 붙여넣기만 하면 됩니다. 변수가 없으면 그냥 복사해서 쓰세요.