98 lines
3.0 KiB
Markdown
98 lines
3.0 KiB
Markdown
# 시스템 트레이 구현 가이드
|
|
|
|
## 개요
|
|
|
|
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)
|
|
|