DateP Project 구독 모달 UI 완성 및 다음 단계 계획 (2025년 3월 26일)

 

✨ 구독 모달 UI 완성 및 다음 단계 계획 (2025.03.26)

오늘 한 작업 (2025년 3월 26일 기준)

오늘은 구독 모달(purchase.tsx)의 UI를 완성하는 데 집중했습니다. 주요 작업은 다음과 같습니다.

• 구독 모달 UI 완성:
  • 구독 플랜 선택 UI 구성: 무료 티어, Basic, Premium 플랜 카드 구현.
  • 카드 디자인 개선: 그림자, 그라데이션, 아이콘 추가로 시각적 완성도 향상.
  • 모달 배경에 그라데이션과 반투명 오버레이 적용.
  • "Back", "복구", "Continue" 버튼에 아이콘 추가.
  • 텍스트 스타일 개선: 폰트 크기와 간격 조정, 다국어 지원 대비(텍스트 줄 바꿈 허용, 카드 높이 동적 조정).
  • "Continue" 버튼에 그라데이션과 애니메이션 적용.
• 기능 구현 (미완성 상태):
  • "복구" 버튼(handleRestorePurchases)과 "구독하기" 버튼(handleStartPurchase)의 기본 로직 구현.
  • 단, 실제 구독 로직 테스트는 아직 진행하지 않음.

현재 상태

구독 모달 UI: 거의 완성됨. 시각적 요소와 사용자 인터랙션(카드 선택, 버튼 애니메이션 등)이 잘 동작함.

구독 로직: handleStartPurchase와 handleRestorePurchases 함수의 기본 구조는 구현했으나, 실제 인앱 결제 로직과의 연동 및 테스트는 아직 진행하지 않음.

Privacy Policy 및 Terms of Services: UI에는 링크가 추가되어 있지만, 실제 개인정보처리방침과 이용약관 콘텐츠는 아직 연결되지 않음.

다음에 해야 할 작업

1. 남은 기능 구현

• "복구" 버튼 기능 완성:
  • handleRestorePurchases 함수를 실제 인앱 결제 복구 로직과 연동.
  • 예: react-native-iap를 통해 구매 복구 API 호출.
  • 복구 성공/실패 시 사용자에게 적절한 피드백(Alert 또는 UI 업데이트) 제공.
• "구독하기" 버튼 기능 완성:
  • handleStartPurchase 함수를 실제 인앱 결제 로직과 연동.
  • 선택된 플랜(selectedPlan)에 따라 적절한 productId를 전달하여 결제 요청.
  • 결제 성공/실패 시 사용자에게 피드백 제공.
• Privacy Policy 및 Terms of Services 링크 연결:
  • "Privacy Policy"와 "Terms of Services" 버튼에 실제 개인정보처리방침과 이용약관 페이지로 이동하는 로직 추가.
  • 예: 웹뷰 또는 외부 브라우저로 링크 열기.

2. 탭 네비게이션 제거

• 현재 index.tsx에 존재하는 하단 탭 네비게이션 제거:
  • _layout.tsx (또는 네비게이션 설정 파일) 수정.
  • 목표: 불필요한 UI 요소 제거로 간결한 화면 구성.
  • 작업 내용:
    • @react-navigation/bottom-tabs로 구현된 탭 네비게이터 제거.
    • 탭 네비게이터 대신 스택 네비게이터(@react-navigation/native-stack) 또는 다른 네비게이션 구조로 대체.
    • 관련된 탭 화면 컴포넌트 정리.

3. 테스트

• 구독 로직 테스트:
  • handleStartPurchase와 handleRestorePurchases 함수가 실제 인앱 결제와 정상적으로 연동되는지 테스트.
  • 테스트 환경에서 더미 결제 상품을 사용하여 결제 흐름 확인.
  • 결제 성공/실패 시 UI 피드백(Alert, 로딩 상태 등)이 정상적으로 표시되는지 확인.
• 비공개 테스트 (Android):
  • eas build를 사용하여 Android 빌드 생성.
  • Google Play Console에서 비공개 테스트 링크 생성.
  • 인앱 상품 실험 진행:
    • Google Play 결제 테스트 환경 설정.
    • 테스트 결제 카드로 구독 플랜 구매 테스트.
    • 복구 기능 테스트.
• 비공개 테스트 (iOS):
  • eas build를 사용하여 iOS 빌드 생성.
  • TestFlight를 통해 비공개 테스트 링크 생성.
  • 인앱 상품 실험 진행:
    • Apple의 샌드박스 환경에서 테스트 계정으로 구독 플랜 구매 테스트.
    • 복구 기능 테스트.

4. 추가 개선 (선택 사항)

• 에러 핸들링 강화:
  • 네트워크 오류, 결제 취소 등 다양한 에러 케이스에 대한 처리 추가.
  • 사용자에게 더 구체적인 에러 메시지 제공.
• UI/UX 개선:
  • 결제 진행 중 로딩 상태를 더 명확히 표시(예: 스피너 추가).
  • 다국어 지원을 위해 translations 객체를 활용하여 텍스트 동적 변경.
• 분석 추가:
  • 구독 플랜 선택 및 결제 성공/실패 이벤트를 추적하기 위해 분석 도구(예: Firebase Analytics) 추가.

5. 배포 준비

• 코드 리뷰 및 최적화:
  • purchase.tsx 파일 코드 리뷰.
  • 불필요한 코드 정리 및 성능 최적화.
• 문서화:
  • 구독 모달의 기능 및 테스트 결과 문서화.
  • 인앱 결제 관련 설정(Google Play Console, App Store Connect) 문서화.

작업 일정 (예상)

3월 27일~3월 28일

• "복구" 및 "구독하기" 버튼 기능 완성.
• Privacy Policy 및 Terms of Services 링크 연결.
• 탭 네비게이션 제거 작업.
• 로컬 환경에서 구독 로직 테스트.

3월 29일~3월 30일

• Android 비공개 테스트:
  • EAS 빌드 및 Google Play 비공개 테스트 링크 생성.
  • 인앱 상품 실험 및 테스트.
• iOS 비공개 테스트:
  • EAS 빌드 및 TestFlight 비공개 테스트 링크 생성.
  • 인앱 상품 실험 및 테스트.

3월 31일

• 테스트 결과 피드백 반영.
• 추가 개선 및 배포 준비.

추가 참고

탭 네비게이션 제거 시 주의점: 탭 네비게이션을 제거하면 기존 탭 화면 간의 이동 로직이 변경되므로, 관련된 네비게이션 로직(예: navigation.navigate)을 모두 점검해야 합니다. 탭 네비게이터를 제거한 후, 주요 화면 간 이동을 위해 스택 네비게이터를 활용하거나, 필요 시 드로어 네비게이터(@react-navigation/drawer)를 추가로 고려할 수 있습니다.

• 인앱 결제 라이브러리:
  • react-native-iap를 사용 중이라면, startPurchase와 restorePurchases 함수를 react-native-iap의 API(requestPurchase, getPurchases 등)로 구현해야 합니다.
  • 예: requestPurchase({ sku: productId })로 결제 요청, getPurchases()로 구매 복구.
• 테스트 환경 설정:
  • Google Play: 테스트 결제 카드 설정 및 비공개 테스트 트랙 생성.
  • App Store: 샌드박스 테스터 계정 생성 및 TestFlight 설정.