c231d5be65
주요 변경사항: • Clerk 인증 시스템 통합 및 설정 • Supabase 데이터베이스 스키마 설계 및 적용 • JWT 기반 Row Level Security (RLS) 정책 구현 • 기존 Appwrite 인증을 Clerk로 완전 교체 기술적 개선: • 무한 로딩 문제 해결 - Index.tsx 인증 로직 수정 • React root 마운팅 오류 수정 - main.tsx 개선 • CORS 설정 추가 - vite.config.ts 수정 • Sentry 에러 모니터링 통합 추가된 컴포넌트: • AuthGuard: 인증 보호 컴포넌트 • SignIn/SignUp: Clerk 기반 인증 UI • ClerkProvider: Clerk 설정 래퍼 • EnvTest: 개발환경 디버깅 도구 데이터베이스: • user_profiles, transactions, budgets, category_budgets 테이블 • Clerk JWT 토큰 기반 RLS 정책 • 자동 사용자 프로필 생성 및 동기화 Task Master: • Task 11.1, 11.2, 11.4 완료 • 프로젝트 관리 시스템 업데이트 Note: ESLint 정리는 별도 커밋에서 진행 예정 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
54 lines
3.0 KiB
Plaintext
54 lines
3.0 KiB
Plaintext
# 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 등)
|
|
|