# React Native 설정 가이드

이 문서는 Zellyy 모바일 앱 개발을 위한 React Native 개발 환경 설정 방법을 안내합니다.

## 개발 환경 요구사항

- Node.js 16.0.0 이상
- npm 8.0.0 이상 또는 Yarn 1.22.0 이상
- Git
- Watchman (macOS 사용자)
- Xcode 14.0 이상 (iOS 개발용, macOS 필요)
- Android Studio (Android 개발용)
- JDK 11 이상

## 개발 환경 설정

### 1. Node.js 및 npm 설치

#### macOS (Homebrew 사용)

```bash
brew install node
```

#### Windows (Chocolatey 사용)

```bash
choco install nodejs
```

#### Linux (Ubuntu/Debian)

```bash
curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
```

### 2. React Native CLI 설치

```bash
npm install -g react-native-cli
```

### 3. Expo CLI 설치 (권장)

Expo는 React Native 개발을 더 쉽게 만들어주는 도구 세트입니다. Zellyy 프로젝트는 Expo를 사용하여 개발합니다.

```bash
npm install -g expo-cli
```

### 4. iOS 개발 환경 설정 (macOS 필요)

#### Xcode 설치

App Store에서 Xcode를 설치하거나 [Apple 개발자 웹사이트](https://developer.apple.com/xcode/)에서 다운로드합니다.

#### iOS 시뮬레이터 설정

Xcode를 설치한 후, 다음 명령어로 iOS 시뮬레이터를 설치합니다:

1. Xcode 실행
2. Xcode > Preferences > Components 메뉴 선택
3. 원하는 iOS 시뮬레이터 버전 설치

#### CocoaPods 설치

```bash
sudo gem install cocoapods
```

### 5. Android 개발 환경 설정

#### Android Studio 설치

[Android Studio 다운로드 페이지](https://developer.android.com/studio)에서 Android Studio를 다운로드하고 설치합니다.

#### Android SDK 설치

Android Studio를 설치한 후, 다음 단계를 따릅니다:

1. Android Studio 실행
2. SDK Manager 열기 (Tools > SDK Manager)
3. "SDK Platforms" 탭에서 Android 12 (API Level 31) 이상 설치
4. "SDK Tools" 탭에서 다음 항목 설치:
   - Android SDK Build-Tools
   - Android Emulator
   - Android SDK Platform-Tools
   - Google Play services

#### 환경 변수 설정

##### macOS/Linux

`~/.bash_profile` 또는 `~/.zshrc` 파일에 다음 내용을 추가합니다:

```bash
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
```

##### Windows

시스템 환경 변수에 다음 내용을 추가합니다:

- 변수 이름: `ANDROID_HOME`
- 변수 값: `C:\Users\USERNAME\AppData\Local\Android\Sdk`

PATH 환경 변수에 다음 경로를 추가합니다:
- `%ANDROID_HOME%\platform-tools`
- `%ANDROID_HOME%\emulator`
- `%ANDROID_HOME%\tools`
- `%ANDROID_HOME%\tools\bin`

## Zellyy 프로젝트 설정

### 1. 프로젝트 클론

```bash
git clone https://github.com/your-organization/zellyy-app.git
cd zellyy-app
```

### 2. 의존성 설치

```bash
npm install
# 또는
yarn install
```

### 3. 환경 변수 설정

`.env.example` 파일을 복사하여 `.env` 파일을 생성하고 필요한 환경 변수를 설정합니다:

```bash
cp .env.example .env
```

`.env` 파일을 열고 다음 변수를 설정합니다:

```
API_URL=https://a11.ism.kr/api
SUPABASE_URL=https://a11.ism.kr
SUPABASE_ANON_KEY=your_supabase_anon_key
```

### 4. iOS 설정 완료 (macOS 필요)

```bash
cd ios
pod install
cd ..
```

### 5. 앱 실행

#### Expo 개발 서버 시작

```bash
expo start
```

이 명령어는 개발 서버를 시작하고 QR 코드를 표시합니다. Expo Go 앱(iOS/Android)으로 QR 코드를 스캔하여 앱을 실행할 수 있습니다.

#### iOS 시뮬레이터에서 실행

```bash
expo run:ios
# 또는
npm run ios
```

#### Android 에뮬레이터에서 실행

```bash
expo run:android
# 또는
npm run android
```

## 프로젝트 구조

Zellyy 앱 프로젝트는 다음과 같은 구조로 구성됩니다:

```
zellyy-app/
├── App.js                # 앱의 진입점
├── app.json              # Expo 설정
├── assets/               # 이미지, 폰트 등의 정적 자산
├── babel.config.js       # Babel 설정
├── components/           # 재사용 가능한 UI 컴포넌트
│   ├── Card/             # 카드 관련 컴포넌트
│   ├── Common/           # 공통 UI 컴포넌트
│   └── ...
├── constants/            # 상수 정의
├── hooks/                # 커스텀 React 훅
├── navigation/           # 네비게이션 설정
├── screens/              # 앱 화면
│   ├── Auth/             # 인증 관련 화면
│   ├── Cards/            # 카드 관련 화면
│   ├── Profile/          # 프로필 관련 화면
│   └── ...
├── services/             # API 및 외부 서비스 통합
│   ├── api.js            # API 클라이언트
│   ├── supabase.js       # Supabase 클라이언트
│   └── ...
├── store/                # 상태 관리 (Redux 또는 Context API)
├── styles/               # 글로벌 스타일 정의
└── utils/                # 유틸리티 함수
```

## 주요 라이브러리

Zellyy 앱은 다음과 같은 주요 라이브러리를 사용합니다:

- **React Navigation**: 화면 간 네비게이션
- **Expo**: 개발 도구 및 네이티브 기능 접근
- **Supabase JS Client**: Supabase 백엔드 연동
- **React Native Paper**: Material Design 컴포넌트
- **Formik & Yup**: 폼 관리 및 유효성 검사
- **React Native Share**: 소셜 미디어 공유 기능
- **Async Storage**: 로컬 데이터 저장
- **React Native SVG**: SVG 이미지 지원
- **React Native Reanimated**: 고급 애니메이션

## 코딩 스타일 가이드

Zellyy 프로젝트는 다음과 같은 코딩 스타일을 따릅니다:

- **ESLint & Prettier**: 코드 품질 및 포맷팅
- **함수형 컴포넌트**: 클래스 컴포넌트 대신 함수형 컴포넌트와 훅 사용
- **명명 규칙**:
  - 컴포넌트: PascalCase (예: `CardItem.js`)
  - 함수 및 변수: camelCase (예: `getUserData`)
  - 상수: UPPER_SNAKE_CASE (예: `API_URL`)
- **파일 구조**: 관련 기능끼리 폴더로 그룹화
- **주석**: 복잡한 로직에 주석 추가

## 디버깅

### React Native Debugger 설정

[React Native Debugger](https://github.com/jhen0409/react-native-debugger)를 사용하여 앱을 디버깅할 수 있습니다:

1. React Native Debugger 설치:
   ```bash
   # macOS (Homebrew)
   brew install --cask react-native-debugger
   
   # Windows/Linux
   # GitHub 릴리스 페이지에서 다운로드
   ```

2. 디버거 실행:
   ```bash
   open "rndebugger://set-debugger-loc?host=localhost&port=19000"
   ```

3. 앱에서 디버깅 활성화:
   - iOS 시뮬레이터: `Cmd + D` 누르고 "Debug JS Remotely" 선택
   - Android 에뮬레이터: `Cmd + M` 또는 `Ctrl + M` 누르고 "Debug JS Remotely" 선택

### Flipper (선택 사항)

네이티브 코드 디버깅을 위해 [Flipper](https://fbflipper.com/)를 사용할 수 있습니다.

## 빌드 및 배포

### iOS 앱 빌드

1. 앱 버전 업데이트:
   `app.json` 파일에서 `version` 및 `buildNumber` 업데이트

2. 배포용 빌드 생성:
   ```bash
   expo build:ios
   ```

3. 생성된 IPA 파일을 App Store Connect에 업로드

### Android 앱 빌드

1. 앱 버전 업데이트:
   `app.json` 파일에서 `version` 및 `versionCode` 업데이트

2. 배포용 빌드 생성:
   ```bash
   expo build:android
   ```

3. 생성된 APK 또는 AAB 파일을 Google Play Console에 업로드

## 문제 해결

### 일반적인 문제 및 해결 방법

1. **Metro 번들러 캐시 문제**:
   ```bash
   expo start --clear
   ```

2. **의존성 문제**:
   ```bash
   rm -rf node_modules
   npm install
   ```

3. **iOS 빌드 실패**:
   ```bash
   cd ios
   pod install --repo-update
   cd ..
   ```

4. **Android 빌드 실패**:
   ```bash
   cd android
   ./gradlew clean
   cd ..
   ```

## 참고 자료

- [React Native 공식 문서](https://reactnative.dev/docs/getting-started)
- [Expo 문서](https://docs.expo.dev/)
- [React Navigation 문서](https://reactnavigation.org/docs/getting-started)
- [Supabase 문서](https://supabase.io/docs)

## 결론

이 가이드는 Zellyy 앱 개발을 위한 React Native 환경 설정 및 프로젝트 구조에 대한 기본 정보를 제공합니다. 개발 과정에서 추가적인 질문이나 문제가 있으면 개발팀에 문의하세요.