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.3 KiB
Plaintext
44 lines
3.3 KiB
Plaintext
# Task ID: 5
|
|
# Title: 상태 관리를 Context API에서 Zustand로 마이그레이션
|
|
# Status: done
|
|
# Dependencies: 1
|
|
# Priority: medium
|
|
# Description: 기존 Context API 기반 상태 관리를 Zustand로 전환하여 보일러플레이트 코드를 줄이고 성능을 향상시킵니다.
|
|
# Details:
|
|
1. Zustand 설치 및 기본 설정 2. 기존 Context 구조 분석 및 Zustand store 설계 3. 인증 상태 관리 store 생성 (auth store) 4. 앱 전체 상태 관리 store 생성 (app store) 5. 기존 useContext 호출을 zustand store 사용으로 변경 6. TypeScript 타입 정의 추가 7. DevTools 연동 설정
|
|
|
|
# Test Strategy:
|
|
상태 변경이 예상대로 동작하는지 확인, 컴포넌트 리렌더링 횟수 감소 확인, 개발자 도구에서 상태 추적 가능 확인
|
|
|
|
# Subtasks:
|
|
## 1. Zustand 패키지 설치 및 기본 설정 구성 [done]
|
|
### Dependencies: None
|
|
### Description: Zustand 패키지를 설치하고 TypeScript 설정 및 DevTools 연동을 위한 기본 구성을 설정합니다.
|
|
### Details:
|
|
npm install zustand를 실행하여 패키지를 설치하고, immer와 devtools 미들웨어 설정을 포함한 기본 store 구조를 생성합니다. TypeScript 지원을 위한 타입 정의도 함께 설정합니다.
|
|
|
|
## 2. 기존 Context API 구조 분석 및 Zustand 스토어 아키텍처 설계 [done]
|
|
### Dependencies: 5.1
|
|
### Description: 현재 사용 중인 Context API 구조를 분석하고 Zustand로 마이그레이션할 스토어 아키텍처를 설계합니다.
|
|
### Details:
|
|
src/contexts 폴더의 기존 Context 코드를 분석하여 상태 구조, 액션 함수, 타입 정의를 파악하고, 이를 Zustand 스토어로 변환할 계획을 수립합니다. 인증, 예산, 앱 상태 등 도메인별로 스토어를 분리하는 방안을 고려합니다.
|
|
|
|
## 3. 인증 상태 관리 Zustand 스토어 구현 [done]
|
|
### Dependencies: 5.2
|
|
### Description: 사용자 인증 관련 상태와 액션을 관리하는 Zustand 스토어를 생성합니다.
|
|
### Details:
|
|
src/stores/authStore.ts 파일을 생성하여 사용자 로그인 상태, 사용자 정보, 로그인/로그아웃 액션 함수를 포함한 인증 스토어를 구현합니다. Appwrite 인증과의 연동도 포함하며, 타입 안전성을 보장하는 TypeScript 인터페이스를 정의합니다.
|
|
|
|
## 4. 앱 전체 상태 관리 Zustand 스토어 구현 [done]
|
|
### Dependencies: 5.2
|
|
### Description: 전역 앱 상태(테마, 로딩 상태, 에러 처리 등)와 예산 관리 상태를 위한 Zustand 스토어를 생성합니다.
|
|
### Details:
|
|
src/stores/appStore.ts와 src/stores/budgetStore.ts 파일을 생성하여 앱 전반의 상태와 예산 관련 상태를 관리하는 스토어를 구현합니다. 각 스토어는 독립적으로 작동하면서도 필요시 서로 참조할 수 있도록 설계합니다.
|
|
|
|
## 5. 기존 useContext 호출을 Zustand 스토어 사용으로 전환 [done]
|
|
### Dependencies: 5.3, 5.4
|
|
### Description: 모든 컴포넌트에서 useContext 호출을 제거하고 Zustand 스토어를 사용하도록 리팩토링합니다.
|
|
### Details:
|
|
src/components, src/pages, src/hooks 폴더의 모든 파일에서 Context API 사용을 찾아 Zustand 스토어 사용으로 변경합니다. useAuth, useBudget 등의 커스텀 훅도 Zustand 기반으로 재작성하고, Context Provider 컴포넌트들을 제거합니다.
|
|
|