# 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 컴포넌트들을 제거합니다.