# LogiStream 차량 위치 공차 시스템 - 모바일 앱

React Native 기반의 크로스 플랫폼(Android/iOS) 모바일 앱입니다. 웹뷰를 통해 https://logistream.kpslp.kr 사이트를 표시하고, 실시간 위치 정보를 수집하여 서버로 전송합니다.

## 주요 기능

### 1. 웹뷰 통합
- https://logistream.kpslp.kr 사이트를 네이티브 앱 내에서 표시
- 웹과 네이티브 간 양방향 통신 지원
- 로그인/로그아웃 상태 동기화

### 2. 위치 추적
- GPS를 통한 실시간 위치 정보 수집
- 백그라운드에서도 지속적인 위치 추적
- 10초 간격으로 자동 업데이트 (설정 변경 가능)
- 고정밀 위치 정보 (위도, 경도, 정확도, 고도, 방향, 속도)

### 3. 서버 통신
- 위치 정보를 서버로 자동 전송
- 사용자 정보와 함께 전송 (userId, userName, userEmail)
- 디바이스 정보 포함 (플랫폼, 버전)
- JWT 토큰 기반 인증 지원

### 4. 권한 관리
- Android: 위치 권한, 백그라운드 위치 권한
- iOS: 위치 권한 (항상 허용)
- 앱 실행 시 자동 권한 요청

## 프로젝트 구조

```
logistream-mobile/
├── App.tsx                 # 메인 앱 컴포넌트
├── index.js               # 앱 진입점
├── package.json           # 의존성 관리
├── tsconfig.json          # TypeScript 설정
├── babel.config.js        # Babel 설정
├── metro.config.js        # Metro 번들러 설정
├── android/               # Android 네이티브 코드
│   ├── app/
│   │   ├── src/main/AndroidManifest.xml
│   │   └── build.gradle
│   └── build.gradle
└── ios/                   # iOS 네이티브 코드
    ├── Podfile
    └── LogiStream/
        └── Info.plist
```

## 설치 및 실행

### 사전 요구사항

1. **Node.js** (v18 이상)
2. **React Native 개발 환경**
   - Android: Android Studio, JDK 11
   - iOS: Xcode (macOS만 해당)

### 설치

```bash
# 의존성 설치
npm install

# iOS 의존성 설치 (macOS만)
cd ios && pod install && cd ..
```

### Android 실행

```bash
# Android 에뮬레이터 또는 실제 기기에서 실행
npm run android
```

### iOS 실행

```bash
# iOS 시뮬레이터 또는 실제 기기에서 실행 (macOS만)
npm run ios
```

## 웹-네이티브 통신 API

### 웹에서 네이티브로 메시지 전송

웹 페이지에서 다음 함수들을 사용할 수 있습니다:

```javascript
// 로그인 성공 시 호출
window.notifyLoginSuccess({
  userId: "user123",
  userName: "홍길동",
  userEmail: "user@example.com",
  token: "jwt_token_here"
});

// 로그아웃 시 호출
window.notifyLogout();

// 현재 위치 요청
window.requestCurrentLocation();

// 위치 추적 시작
window.startLocationTracking();

// 위치 추적 중지
window.stopLocationTracking();
```

### 네이티브에서 웹으로 메시지 수신

웹 페이지에서 네이티브 메시지를 수신하려면:

```javascript
window.addEventListener('nativeMessage', function(event) {
  const data = event.detail;
  
  switch(data.type) {
    case 'NATIVE_INFO':
      console.log('플랫폼:', data.platform);
      console.log('위치 권한:', data.hasLocationPermission);
      break;
      
    case 'LOCATION_UPDATE':
      console.log('현재 위치:', data.location);
      break;
  }
});
```

## 서버 API 엔드포인트

앱은 다음 형식으로 위치 정보를 서버로 전송합니다:

**엔드포인트**: `POST https://logistream.kpslp.kr/api/location`

**요청 헤더**:
```
Content-Type: application/json
Authorization: Bearer {token}
```

**요청 본문**:
```json
{
  "userId": "user123",
  "userName": "홍길동",
  "userEmail": "user@example.com",
  "location": {
    "latitude": 37.5665,
    "longitude": 126.9780,
    "accuracy": 10.5,
    "altitude": 50.0,
    "heading": 180.0,
    "speed": 5.5,
    "timestamp": 1700000000000
  },
  "deviceInfo": {
    "platform": "android",
    "version": "13"
  }
}
```

## 설정 변경

### 위치 업데이트 간격 변경

`App.tsx` 파일에서 다음 상수를 수정:

```typescript
const LOCATION_UPDATE_INTERVAL = 10000; // 밀리초 단위 (기본값: 10초)
```

### 서버 API 엔드포인트 변경

`App.tsx` 파일에서 다음 상수를 수정:

```typescript
const API_ENDPOINT = 'https://logistream.kpslp.kr/api/location';
```

### 웹사이트 URL 변경

`App.tsx` 파일에서 다음 상수를 수정:

```typescript
const WEBSITE_URL = 'https://logistream.kpslp.kr';
```

## APK/IPA 빌드

### Android APK 빌드

```bash
cd android
./gradlew assembleRelease
# APK 위치: android/app/build/outputs/apk/release/app-release.apk
```

### iOS IPA 빌드

Xcode에서:
1. `ios/LogiStream.xcworkspace` 파일 열기
2. Product > Archive 선택
3. Distribute App 선택

## 문제 해결

### Android 권한 오류
- `AndroidManifest.xml`에 필요한 권한이 모두 포함되어 있는지 확인
- Android 10 이상에서는 백그라운드 위치 권한이 별도로 필요

### iOS 위치 권한 오류
- `Info.plist`에 위치 사용 설명이 포함되어 있는지 확인
- iOS 13 이상에서는 "항상 허용" 권한 필요

### 웹뷰 통신 오류
- 웹 페이지가 HTTPS로 제공되는지 확인
- JavaScript가 활성화되어 있는지 확인
- 브라우저 콘솔에서 에러 메시지 확인

## 라이선스

이 프로젝트는 차량 위치 공차 시스템을 위한 내부 사용 목적으로 개발되었습니다.

## 지원

문제가 발생하거나 질문이 있으시면 개발팀에 문의해주세요.