DateP
DateP- app store 스크린샷 생성 및 power by google 추가
Solo.dev
2025. 4. 24. 22:17
DateP 작업 로그
작업 개요
- 날짜: 2025년 4월 24일
- 프로젝트: DateP
- 요약: iOS 앱 스크린샷 생성, HomeScreen 모달에 "Powered by Google" 추가, 모달 푸터의 플랫폼별 스타일링 처리를 완료했습니다.
작업 1: Canva로 iOS 앱 스크린샷 생성
- Canva를 사용하여 App Store에 제출할 DateP iOS 앱의 스크린샷을 제작했습니다.
- 앱의 주요 기능을 강조하는 시각적으로 매력적인 스크린샷을 디자인했습니다.
- App Store 가이드라인에 맞는 이미지 크기와 콘텐츠를 준수했습니다.
- 고해상도 이미지로 내보내어 제출 준비를 완료했습니다.
작업 2: index.tsx (HomeScreen) 모달에 "Powered by Google" 추가
- HomeScreen(
index.tsx)의 모달에서 기본/프리미엄 플랜(Google Places API 데이터 사용)에"Powered by Google"텍스트를 추가했습니다. - 무료 플랜은 Google 데이터를 사용하지 않으므로 변경하지 않았습니다.
- 위치: 기본/프리미엄 플랜(
isGptMode === false)의FlatList내renderItem. - 구현: 각 장소 카드의
ScrollView하단에Text컴포넌트를 추가했습니다. - 추가된 코드:
<Text style={styles.poweredByGoogle}>Powered by Google</Text>
- 추가된 스타일 (
styles.tsx):
poweredByGoogle: {
fontSize: 12,
color: '#666',
textAlign: 'center',
marginTop: 10,
marginBottom: 10,
}
- 컨텍스트: Google Places API 가이드라인을 준수하기 위해
reviewContainer다음에 텍스트를 추가하여 각 장소 카드에 표시되도록 했습니다.
작업 3: 모달 내부 푸터의 iOS/Android 분기 처리
- 모달의
ListFooterComponent내footerCardContainer의marginTop스타일을 iOS와 Android에서 다르게 적용했습니다. - 요구사항:
- iOS:
marginTop: height * 0.133 - Android:
marginTop: height * 0.045
- iOS:
- 구현:
Platform.OS를 사용하여marginTop값을 동적으로 설정했습니다. - 수정된 코드:
import { Platform } from 'react-native';
// ListFooterComponent 내
<View
style={[
styles.footerCardContainer,
{
marginTop: Platform.OS === 'ios' ? height * 0.133 : height * 0.045,
height: 500,
width: width * 0.80,
},
]}
>
- 컨텍스트:
Platform모듈을 임포트하여 운영 체제를 감지하고, 플랫폼별로 적절한 스타일을 적용하여 UI 일관성을 유지했습니다.
비고
- 모든 변경 사항은 iOS와 Android 플랫폼에서 호환성을 확인했습니다.
"Powered by Google"텍스트는 Google Places API 요구사항을 준수하여 기본/프리미엄 플랜에만 추가되었으며, 무료 플랜은 변경되지 않았습니다.- 플랫폼별
marginTop설정으로 디바이스 간 UI가 일관되게 표시됩니다.