3.0 KiB

Raw Permalink Blame History

시스템 트레이 구현 가이드

개요

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 플러그인 사용 (권장)

# 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. 사용 예시

프론트엔드에서 호출:

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. 다음 단계

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

참고사항

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

3.0 KiB Raw Permalink Blame History