Fix: Address codebase error

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"
   }
 };
 

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",

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",

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
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>
+```
+
+4. 아이콘 배경색을 `android/app/src/main/res/values/colors.xml`에 추가합니다:
+```xml
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <color name="ic_launcher_background">#FFFFFF</color>
+</resources>
+```
+
+5. `strings.xml` 파일에서 앱 이름이 올바르게 설정되어 있는지 확인합니다:
+```xml
+<resources>
+    <string name="app_name">젤리의 적자탈출</string>
+</resources>
+```
+
+이미지 변환 도구:
+- Android Asset Studio: https://romannurik.github.io/AndroidAssetStudio/
+- App Icon Generator: https://appicon.co/

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. 앱 심사 제출
+
+## 중요 팁
+- 배포 전 다양한 기기에서 앱 테스트 필수
+- 앱 출시 후 지속적인 모니터링 및 업데이트 계획
+- 사용자 피드백 수집 및 반영 메커니즘 구축

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/