DateP

DateP- app store 스크린샷 생성 및 power by google 추가

Solo.dev 2025. 4. 24. 22:17
DateP 작업 로그 - 2025-04-24

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)의 FlatListrenderItem.
  • 구현: 각 장소 카드의 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 분기 처리

  • 모달의 ListFooterComponentfooterCardContainermarginTop 스타일을 iOS와 Android에서 다르게 적용했습니다.
  • 요구사항:
    • iOS: marginTop: height * 0.133
    • Android: marginTop: height * 0.045
  • 구현: 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가 일관되게 표시됩니다.