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>
44 lines
3.8 KiB
Plaintext
44 lines
3.8 KiB
Plaintext
# Task ID: 12
|
|
# Title: Implement PWA Features and Optimize Charting Library
|
|
# Status: pending
|
|
# Dependencies: None
|
|
# Priority: low
|
|
# Description: Enhance the application by converting it into a Progressive Web App (PWA) for better offline capabilities and engagement, and improve performance by switching to a more lightweight charting library.
|
|
# Details:
|
|
Replace the Recharts library with Chart.js to reduce the final bundle size (from ~300KB to ~100KB). Implement a service worker to cache application assets and data for offline access. Add a web app manifest to allow users to 'install' the app to their home screen and configure support for push notifications.
|
|
|
|
# Test Strategy:
|
|
Visually compare the new Chart.js charts with the old ones to ensure correctness. Use Lighthouse in Chrome DevTools to audit the PWA implementation and verify that it meets the core criteria (service worker, manifest, HTTPS). Test offline functionality and push notification delivery.
|
|
|
|
# Subtasks:
|
|
## 1. 웹 앱 매니페스트 파일 생성 및 구성 [pending]
|
|
### Dependencies: None
|
|
### Description: PWA 기본 요구사항인 웹 앱 매니페스트 파일을 생성하고, 앱 이름, 아이콘, 테마 컬러, 디스플레이 모드 등을 설정하여 홈 화면 설치 기능을 활성화합니다.
|
|
### Details:
|
|
public/manifest.json 파일을 생성하고 name, short_name, description, icons (192x192, 512x512), theme_color, background_color, display, start_url, scope 등의 필수 속성들을 정의합니다. index.html에 매니페스트 링크를 추가하고 메타 태그들을 설정합니다.
|
|
|
|
## 2. 서비스 워커 구현 및 캐싱 전략 설정 [pending]
|
|
### Dependencies: 12.1
|
|
### Description: 오프라인 기능을 위한 서비스 워커를 구현하고, 애플리케이션 에셋과 API 응답을 캐싱하는 전략을 설정합니다.
|
|
### Details:
|
|
public/sw.js 파일을 생성하고 install, activate, fetch 이벤트 핸들러를 구현합니다. Cache API를 사용하여 정적 에셋들(HTML, CSS, JS, 이미지)을 프리캐싱하고, 네트워크 우선/캐시 폴백 전략으로 API 요청을 처리합니다. 메인 애플리케이션에서 서비스 워커를 등록합니다.
|
|
|
|
## 3. Chart.js로 차트 라이브러리 마이그레이션 [pending]
|
|
### Dependencies: None
|
|
### Description: 현재 사용 중인 Recharts를 Chart.js로 교체하여 번들 크기를 최적화하고 성능을 개선합니다.
|
|
### Details:
|
|
Chart.js와 react-chartjs-2 라이브러리를 설치하고, 기존 Recharts 컴포넌트들을 Chart.js 기반으로 재작성합니다. 파이 차트, 라인 차트, 바 차트 등 현재 사용 중인 모든 차트 타입을 마이그레이션하고, 동일한 스타일링과 인터랙션을 유지합니다.
|
|
|
|
## 4. 푸시 알림 시스템 구현 [pending]
|
|
### Dependencies: 12.2
|
|
### Description: PWA의 고급 기능인 푸시 알림을 구현하여 사용자 참여도를 높입니다.
|
|
### Details:
|
|
사용자 권한 요청 로직을 구현하고, 서비스 워커에서 push 이벤트를 처리합니다. 예산 초과 알림, 정기적인 가계부 작성 리마인더 등의 알림 타입을 정의하고, 알림 클릭 시 해당 페이지로 이동하는 기능을 구현합니다. 로컬 알림 스케줄링 기능도 추가합니다.
|
|
|
|
## 5. PWA 기능 통합 테스트 및 성능 최적화 [pending]
|
|
### Dependencies: 12.1, 12.2, 12.3, 12.4
|
|
### Description: 구현된 모든 PWA 기능들의 통합 테스트를 수행하고, Lighthouse 점수를 향상시키기 위한 최적화 작업을 진행합니다.
|
|
### Details:
|
|
Lighthouse PWA 감사를 실행하여 모든 PWA 기준을 충족하는지 확인합니다. 설치 가능성, 오프라인 작동, 빠른 로딩 등의 핵심 요구사항을 검증하고, 성능 점수 향상을 위한 추가 최적화를 수행합니다. 번들 크기 최적화와 로딩 성능 개선 작업을 완료합니다.
|
|
|