# 시스템 트레이 구현 가이드

## 개요

Proton Drive처럼 시스템 트레이 아이콘을 표시하고, 로그인 상태에 따라 아이콘 색상과 툴팁을 변경하는 기능을 구현하는 방법입니다.

## 구조 설명

### 1. 파일 구조

```
src-tauri/src/
├── lib.rs              # 메인 앱 설정 (트레이 초기화)
├── tray.rs             # 트레이 관련 로직 (별도 모듈)
└── commands/
    └── tray_commands.rs # 프론트엔드에서 호출할 트레이 커맨드
```

### 2. 모듈 분리 이유

**`tray.rs` (별도 파일로 분리)**
- ✅ **유지보수성**: 트레이 관련 코드가 한 곳에 모여있어 수정이 쉬움
- ✅ **확장성**: 새로운 트레이 기능 추가 시 해당 파일만 수정
- ✅ **가독성**: 메인 코드(`lib.rs`)가 간결해짐
- ✅ **테스트 용이**: 트레이 로직을 독립적으로 테스트 가능

### 3. 구현 방법

#### Tauri 2.x에서 시스템 트레이 사용

Tauri 2.x에서는 시스템 트레이 기능이 변경되었을 수 있습니다. 다음 중 하나의 방법을 사용해야 합니다:

**방법 1: Tauri 플러그인 사용 (권장)**
```toml
# Cargo.toml에 추가
[dependencies]
tauri-plugin-system-tray = "2.0"
```

**방법 2: 직접 구현**
- `tray-icon` 크레이트 사용
- 또는 Tauri 2.x의 새로운 API 사용

### 4. 현재 구현된 구조

#### `src-tauri/src/tray.rs`
- `TrayStatus` 열거형: 로그인 상태 정의
- `create_system_tray()`: 트레이 생성
- `handle_tray_event()`: 트레이 이벤트 처리
- `update_tray_status()`: 상태에 따른 아이콘/툴팁 업데이트

#### `src-tauri/src/commands/tray_commands.rs`
- `update_tray_icon()`: 프론트엔드에서 호출 가능한 커맨드

### 5. 사용 예시

**프론트엔드에서 호출:**
```javascript
import { invoke } from '@tauri-apps/api/core';

// 로그인 상태로 변경
await invoke('update_tray_icon', { status: 'logged_in' });

// 동기화 중 상태로 변경
await invoke('update_tray_icon', { status: 'syncing' });
```

### 6. 아이콘 색상 변경 방법

Proton Drive처럼 아이콘 색상을 변경하려면:

**옵션 1: 상태별 아이콘 파일 준비**
```
src-tauri/icons/
├── icon_logged_out.png  (회색)
├── icon_logged_in.png   (녹색)
├── icon_syncing.png     (파란색)
└── icon_error.png       (빨간색)
```

**옵션 2: 런타임 아이콘 생성**
- `image` 크레이트를 사용하여 런타임에 아이콘 색상 변경
- Cargo.toml에 추가: `image = "0.24"`

### 7. 다음 단계

1. **Tauri 2.x API 확인**: 정확한 시스템 트레이 API 확인 필요
2. **플러그인 설치**: `tauri-plugin-system-tray` 플러그인 사용 여부 확인
3. **아이콘 준비**: 상태별 아이콘 파일 생성
4. **테스트**: 각 상태에서 트레이 동작 확인

## 참고사항

- Tauri 2.x의 시스템 트레이 API는 1.x와 다를 수 있습니다
- 실제 구현 전에 Tauri 2.x 공식 문서를 확인하세요
- OS별로 트레이 동작이 다를 수 있습니다 (Windows, macOS, Linux)