# Task ID: 6
# Title: TanStack Query를 사용한 데이터 페칭 개선
# Status: done
# Dependencies: 5
# Priority: medium
# Description: TanStack Query를 도입하여 자동 캐싱, 동기화, 오프라인 지원을 구현합니다. 모든 핵심 기능이 완료되었으며 프로덕션 환경에서 사용할 준비가 되었습니다.
# Details:
1. @tanstack/react-query 설치 및 QueryClient 설정 완료 2. API 호출 함수들을 React Query hooks로 전환 완료 (useAuthQueries, useTransactionQueries, useSyncQueries) 3. 스마트 캐싱 전략 및 백그라운드 동기화 구현 완료 4. 낙관적 업데이트 및 오프라인 지원 구현 완료 5. QueryCacheManager, BackgroundSync, OfflineManager 컴포넌트 추가 6. 기존 코드와의 원활한 통합 완료

# Test Strategy:
데이터 캐싱이 올바르게 동작하는지 확인, 오프라인 상태에서 캐시된 데이터 접근 가능 확인, 낙관적 업데이트 시나리오 테스트, 프로덕션 빌드 성공 확인

# Subtasks:
## 2. 기존 API 호출을 React Query 훅으로 전환 [done]
### Dependencies: 6.1
### Description: 현재 사용 중인 API 호출 함수들을 useQuery, useMutation 훅으로 변환합니다.
### Details:
1. 기존 fetch/axios 호출을 식별하고 분류
2. 읽기 전용 API를 useQuery로 전환 (거래 목록, 사용자 정보 등)
3. 생성/수정/삭제 API를 useMutation으로 전환
4. 쿼리 키 네이밍 컨벤션 정의 및 적용
5. 각 훅에 적절한 옵션 설정 (enabled, select, onSuccess/onError 등)

## 3. 캐싱 전략 및 백그라운드 동기화 구현 [done]
### Dependencies: 6.2
### Description: 자동 캐싱, staleTime/cacheTime 설정, 백그라운드 refetch를 구성합니다.
### Details:
1. 데이터 타입별 캐싱 전략 정의 (거래 데이터: 5분, 사용자 정보: 30분 등)
2. refetchOnWindowFocus, refetchOnReconnect 설정
3. background refetch 간격 설정
4. 자주 변경되는 데이터와 정적 데이터 구분하여 staleTime 조정
5. 메모리 사용량 최적화를 위한 cacheTime 설정

## 4. 낙관적 업데이트 및 오프라인 지원 구현 [done]
### Dependencies: 6.3
### Description: 사용자 경험 향상을 위한 낙관적 업데이트와 오프라인 상태 처리를 구현합니다.
### Details:
1. 거래 생성/수정/삭제에 낙관적 업데이트 적용
2. 실패 시 자동 롤백 로직 구현
3. 오프라인 상태 감지 및 UI 표시
4. 온라인 복구 시 자동 재시도 메커니즘
5. 에러 핸들링 및 사용자 알림 시스템 구축
6. retry 로직 설정 (exponential backoff)

## 1. TanStack Query 설치 및 QueryClient 설정 [done]
### Dependencies: None
### Description: @tanstack/react-query를 설치하고 애플리케이션에 QueryClient를 설정합니다.
### Details:
1. npm install @tanstack/react-query 실행
2. App.tsx에서 QueryClient 생성 및 QueryClientProvider 설정
3. React Query DevTools 개발 환경에서 활성화
4. 기본 전역 설정값 구성 (staleTime, cacheTime, refetchOnWindowFocus 등)