From 19f68eed0a4435105469d9b6e1d47856b51f7ea7 Mon Sep 17 00:00:00 2001 From: "gpt-engineer-app[bot]" <159125892+gpt-engineer-app[bot]@users.noreply.github.com> Date: Sat, 15 Mar 2025 23:36:42 +0000 Subject: [PATCH] Fix: Address codebase error --- capacitor.config.ts | 20 +++++++- package-lock.json | 10 ++++ package.json | 1 + src/android-icon-guide.md | 40 +++++++++++++++ src/app-deployment-guide.md | 97 +++++++++++++++++++++++++++++++++++++ src/ios-icon-guide.md | 41 ++++++++++++++++ 6 files changed, 208 insertions(+), 1 deletion(-) create mode 100644 src/android-icon-guide.md create mode 100644 src/app-deployment-guide.md create mode 100644 src/ios-icon-guide.md diff --git a/capacitor.config.ts b/capacitor.config.ts index 7b761db..df9d0be 100644 --- a/capacitor.config.ts +++ b/capacitor.config.ts @@ -12,8 +12,26 @@ const config: CapacitorConfig = { plugins: { SplashScreen: { launchShowDuration: 2000, - backgroundColor: "#f2f2f2" + backgroundColor: "#f2f2f2", + androidScaleType: "CENTER_CROP", + showSpinner: false + }, + Keyboard: { + resize: "body", + style: "dark", + resizeOnFullScreen: true } + }, + android: { + buildOptions: { + keystorePath: "", + keystoreAlias: "", + releaseType: "AAB" + } + }, + ios: { + scheme: "젤리의적자탈출", + contentInset: "automatic" } }; diff --git a/package-lock.json b/package-lock.json index da48d6b..f184231 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@capacitor/cli": "^7.1.0", "@capacitor/core": "^7.1.0", "@capacitor/ios": "^7.1.0", + "@capacitor/keyboard": "^7.0.0", "@hookform/resolvers": "^3.9.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", @@ -226,6 +227,15 @@ "@capacitor/core": "^7.1.0" } }, + "node_modules/@capacitor/keyboard": { + "version": "7.0.0", + "resolved": "https://registry.npmjs.org/@capacitor/keyboard/-/keyboard-7.0.0.tgz", + "integrity": "sha512-Tqwy8wG+sx4UqiFCX4Q+bFw6uKgG7BiHKAPpeefoIgoEB8H8Jf3xZNZoVPnJIMuPsCdSvuyHXZbJXH9IEEirGA==", + "license": "MIT", + "peerDependencies": { + "@capacitor/core": ">=7.0.0" + } + }, "node_modules/@esbuild/aix-ppc64": { "version": "0.21.5", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.21.5.tgz", diff --git a/package.json b/package.json index 13e2ce5..de06305 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@capacitor/cli": "^7.1.0", "@capacitor/core": "^7.1.0", "@capacitor/ios": "^7.1.0", + "@capacitor/keyboard": "^7.0.0", "@hookform/resolvers": "^3.9.0", "@radix-ui/react-accordion": "^1.2.0", "@radix-ui/react-alert-dialog": "^1.1.1", diff --git a/src/android-icon-guide.md b/src/android-icon-guide.md new file mode 100644 index 0000000..f9b0d43 --- /dev/null +++ b/src/android-icon-guide.md @@ -0,0 +1,40 @@ + +# 안드로이드 앱 아이콘 설정 가이드 + +안드로이드 앱 아이콘을 설정하려면 다음 단계를 따르세요: + +1. `android/app/src/main/res/` 폴더로 이동합니다. +2. 각 mipmap 폴더에 적절한 크기의 앱 아이콘을 넣습니다: + - `mipmap-mdpi/ic_launcher.png`: 48x48 px + - `mipmap-hdpi/ic_launcher.png`: 72x72 px + - `mipmap-xhdpi/ic_launcher.png`: 96x96 px + - `mipmap-xxhdpi/ic_launcher.png`: 144x144 px + - `mipmap-xxxhdpi/ic_launcher.png`: 192x192 px + +3. 적응형 아이콘의 경우 `mipmap-anydpi-v26/ic_launcher.xml` 파일을 편집합니다: +```xml + + + + + +``` + +4. 아이콘 배경색을 `android/app/src/main/res/values/colors.xml`에 추가합니다: +```xml + + + #FFFFFF + +``` + +5. `strings.xml` 파일에서 앱 이름이 올바르게 설정되어 있는지 확인합니다: +```xml + + 젤리의 적자탈출 + +``` + +이미지 변환 도구: +- Android Asset Studio: https://romannurik.github.io/AndroidAssetStudio/ +- App Icon Generator: https://appicon.co/ diff --git a/src/app-deployment-guide.md b/src/app-deployment-guide.md new file mode 100644 index 0000000..73b3d5d --- /dev/null +++ b/src/app-deployment-guide.md @@ -0,0 +1,97 @@ + +# 젤리의 적자탈출 앱 배포 가이드 + +## 준비 사항 + +1. 안드로이드 배포 + - Android Studio 설치 + - JDK 11 이상 설치 + - Google Play 개발자 계정 ($25 일회성 비용) + +2. iOS 배포 + - Mac 컴퓨터 + - Xcode 최신 버전 설치 + - Apple Developer Program 가입 ($99/년) + - iPhone 또는 iPad (테스트용) + +## 배포 단계 + +### 1. 웹앱 빌드 +```bash +npm run build +``` + +### 2. Capacitor 설치 및 초기화 (처음 한 번만) +```bash +npm install @capacitor/cli @capacitor/core +npx cap init +``` + +### 3. 네이티브 플랫폼 추가 +```bash +npx cap add android +npx cap add ios # Mac에서만 가능 +``` + +### 4. Capacitor와 빌드된 웹앱 동기화 +```bash +npx cap sync +``` + +### 5. 네이티브 IDE 열기 +```bash +npx cap open android # Android Studio 열기 +npx cap open ios # Xcode 열기 (Mac에서만 가능) +``` + +## 앱 아이콘 및 스플래시 스크린 설정 + +### 안드로이드 아이콘 +- `android/app/src/main/res/` 폴더 내 각 mipmap 폴더에 다양한 크기의 아이콘 배치 +- 아이콘 크기: + - mipmap-mdpi: 48x48 px + - mipmap-hdpi: 72x72 px + - mipmap-xhdpi: 96x96 px + - mipmap-xxhdpi: 144x144 px + - mipmap-xxxhdpi: 192x192 px + +### iOS 아이콘 +- Xcode의 Assets.xcassets 내 AppIcon에 아이콘 설정 +- 다양한 크기 필요 (20pt~83.5pt, @1x, @2x, @3x) + +## 스토어 등록 정보 준비 + +### 공통 필요 자료 +- 앱 설명 (짧은 설명 및 상세 설명) +- 스크린샷 (다양한 기기) +- 앱 아이콘 (고해상도) +- 개인정보 처리방침 URL + +### Google Play 스토어 +- 앱 카테고리 선택 +- 콘텐츠 등급 설문 작성 +- 앱 가격 설정 + +### Apple App Store +- App Store Connect에서 앱 등록 +- 앱 심사 가이드라인 준수 +- TestFlight를 통한 베타 테스트 권장 + +## 앱 빌드 및 제출 + +### 안드로이드 +1. Android Studio에서 Build > Generate Signed Bundle/APK +2. 앱 서명 키 생성 또는 기존 키 사용 +3. 앱 번들(AAB) 생성 +4. Google Play Console을 통해 제출 + +### iOS +1. Xcode에서 앱 인증서 및 프로비저닝 프로파일 설정 +2. Product > Archive +3. App Store Connect에 업로드 +4. 앱 심사 제출 + +## 중요 팁 +- 배포 전 다양한 기기에서 앱 테스트 필수 +- 앱 출시 후 지속적인 모니터링 및 업데이트 계획 +- 사용자 피드백 수집 및 반영 메커니즘 구축 diff --git a/src/ios-icon-guide.md b/src/ios-icon-guide.md new file mode 100644 index 0000000..eb8dd3f --- /dev/null +++ b/src/ios-icon-guide.md @@ -0,0 +1,41 @@ + +# iOS 앱 아이콘 설정 가이드 + +iOS 앱 아이콘을 설정하려면 다음 단계를 따르세요: + +1. Xcode를 엽니다 (`npx cap open ios`). +2. 프로젝트 네비게이터에서 Assets.xcassets 폴더를 찾습니다. +3. AppIcon 항목을 선택합니다. +4. 다음 크기의 아이콘을 준비하여 드래그 앤 드롭으로 추가합니다: + +## iOS 아이콘 필수 크기: + +### iPhone +- iPhone 앱: 60pt (@2x: 120x120px, @3x: 180x180px) +- iPhone Spotlight: 40pt (@2x: 80x80px, @3x: 120x120px) +- iPhone Settings: 29pt (@2x: 58x58px, @3x: 87x87px) +- iPhone Notification: 20pt (@2x: 40x40px, @3x: 60x60px) + +### iPad +- iPad 앱: 76pt (@1x: 76x76px, @2x: 152x152px) +- iPad Pro 앱: 83.5pt (@2x: 167x167px) +- iPad Spotlight: 40pt (@1x: 40x40px, @2x: 80x80px) +- iPad Settings: 29pt (@1x: 29x29px, @2x: 58x58px) +- iPad Notification: 20pt (@1x: 20x20px, @2x: 40x40px) + +### App Store +- App Store: 1024x1024px (1x) + +## Info.plist 설정 확인: + +1. Info.plist 파일을 열고 다음 항목이 올바르게 설정되어 있는지 확인합니다: + - Bundle name: 젤리의 적자탈출 + - Bundle identifier: 앱 ID와 일치 (app.lovable.79bc38c3bdd04a7fb4db0ec501bdb94f) + - Privacy 설명 (필요한 경우): + - NSCameraUsageDescription + - NSPhotoLibraryUsageDescription + - NSFaceIDUsageDescription (Face ID 사용 시) + +## 이미지 변환 도구: +- App Icon Generator: https://appicon.co/ +- MakeAppIcon: https://makeappicon.com/