ZELLYY/zellyy-finance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: ESLint 오류 수정 - 사용하지 않는 변수들에 underscore prefix 추가

Browse Source 
- AddTransactionButton.tsx: useEffect import 제거
- BudgetProgressCard.tsx: localBudgetData를 _localBudgetData로 변경
- Header.tsx: isMobile을 _isMobile로 변경
- RecentTransactionsSection.tsx: isDeleting을 _isDeleting로 변경
- TransactionCard.tsx: cn import 제거
- ExpenseForm.tsx: useState import 제거
- cacheStrategies.ts: QueryClient, Transaction import 제거
- Analytics.tsx: Separator import 제거, 미사용 변수들에 underscore prefix 추가
- Index.tsx: useMemo import 제거
- Login.tsx: setLoginError를 _setLoginError로 변경
- Register.tsx: useEffect dependency 수정 및 useCallback 추가
- Settings.tsx: toast, handleClick에 underscore prefix 추가
- authStore.ts: setError, setAppwriteInitialized에 underscore prefix 추가
- budgetStore.ts: ranges를 _ranges로 변경
- BudgetProgressCard.test.tsx: waitFor import 제거

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hansoo
2025-07-12 20:49:36 +09:00
parent 491c06684b
commit 4d9effce41
72 changed files with 9892 additions and 764 deletions
Download Patch File Download Diff File Expand all files Collapse all files

632
CLAUDE.md
View File

@@ -1,417 +1,251 @@
# Task Master AI - Claude Code Integration Guide
# Zellyy Finance - 개인 가계부 애플리케이션
## Essential Commands
## 프로젝트 개요
### Core Workflow Commands
Zellyy Finance는 React와 TypeScript로 구축된 개인 가계부 관리 애플리케이션입니다. 사용자가 수입과 지출을 추적하고 예산을 관리할 수 있는 직관적인 웹 애플리케이션입니다.
## 기술 스택
### 프론트엔드
- **React 18** - 메인 UI 프레임워크
- **TypeScript** - 타입 안전성 보장
- **Vite** - 빠른 개발 서버 및 빌드 도구
- **Tailwind CSS** - 유틸리티 기반 CSS 프레임워크
- **Shadcn/ui** - 고품질 UI 컴포넌트 라이브러리
- **React Router** - 클라이언트 사이드 라우팅
- **Zustand** - 상태 관리
### 백엔드 및 인증
- **Appwrite** - 백엔드 서비스 (인증, 데이터베이스)
- **React Hook Form** - 폼 상태 관리 및 유효성 검사
### 테스팅
- **Vitest** - 테스트 러너
- **React Testing Library** - 컴포넌트 테스팅
- **@testing-library/jest-dom** - DOM 테스팅 유틸리티
### 개발 도구
- **ESLint** - 코드 품질 검사
- **Prettier** - 코드 포맷팅
- **Task Master AI** - 프로젝트 관리 및 작업 추적
## 프로젝트 구조
```
src/
├── components/ # 재사용 가능한 UI 컴포넌트
│ ├── ui/ # Shadcn/ui 기본 컴포넌트
│ ├── auth/ # 인증 관련 컴포넌트
│ ├── expenses/ # 지출 관리 컴포넌트
│ ├── budget/ # 예산 관리 컴포넌트
│ ├── transaction/ # 거래 관련 컴포넌트
│ ├── notification/ # 알림 컴포넌트
│ ├── offline/ # 오프라인 모드 컴포넌트
│ ├── query/ # 쿼리 관련 컴포넌트
│ └── sync/ # 동기화 컴포넌트
├── contexts/ # React Context API
│ └── budget/ # 예산 관련 컨텍스트
├── hooks/ # 커스텀 React 훅
│ ├── query/ # 쿼리 관련 훅
│ ├── sync/ # 동기화 관련 훅
│ └── transactions/ # 거래 관련 훅
├── lib/ # 라이브러리 및 설정
│ ├── appwrite/ # Appwrite 설정
│ └── query/ # 쿼리 관련 설정
├── pages/ # 페이지 컴포넌트
├── stores/ # Zustand 스토어
├── types/ # TypeScript 타입 정의
├── utils/ # 유틸리티 함수
└── __tests__/ # 테스트 파일
```
## 주요 기능
### 1. 사용자 인증
- 이메일/비밀번호 기반 로그인
- 회원가입 및 계정 관리
- 비밀번호 재설정
- 세션 관리
### 2. 거래 관리
- 수입/지출 등록 및 편집
- 카테고리별 분류
- 결제 수단 관리
- 거래 내역 검색 및 필터링
### 3. 예산 관리
- 월간/주간/일간 예산 설정
- 카테고리별 예산 분배
- 예산 대비 지출 현황 시각화
- 예산 초과 알림
### 4. 분석 및 통계
- 카테고리별 지출 분석
- 결제 수단별 통계
- 월간/연간 트렌드 분석
- 차트 및 그래프 시각화
### 5. 오프라인 모드
- 네트워크 상태 감지
- 오프라인 데이터 로컬 저장
- 온라인 복구 시 자동 동기화
## 개발 명령어
### 기본 명령어
```bash
# Project Setup
task-master init # Initialize Task Master in current project
task-master parse-prd .taskmaster/docs/prd.txt # Generate tasks from PRD document
task-master models --setup # Configure AI models interactively
# Daily Development Workflow
task-master list # Show all tasks with status
task-master next # Get next available task to work on
task-master show <id> # View detailed task information (e.g., task-master show 1.2)
task-master set-status --id=<id> --status=done # Mark task complete
# Task Management
task-master add-task --prompt="description" --research # Add new task with AI assistance
task-master expand --id=<id> --research --force # Break task into subtasks
task-master update-task --id=<id> --prompt="changes" # Update specific task
task-master update --from=<id> --prompt="changes" # Update multiple tasks from ID onwards
task-master update-subtask --id=<id> --prompt="notes" # Add implementation notes to subtask
# Analysis & Planning
task-master analyze-complexity --research # Analyze task complexity
task-master complexity-report # View complexity analysis
task-master expand --all --research # Expand all eligible tasks
# Dependencies & Organization
task-master add-dependency --id=<id> --depends-on=<id> # Add task dependency
task-master move --from=<id> --to=<id> # Reorganize task hierarchy
task-master validate-dependencies # Check for dependency issues
task-master generate # Update task markdown files (usually auto-called)
npm run dev # 개발 서버 시작
npm run build # 프로덕션 빌드
npm run preview # 빌드된 파일 미리보기
npm run lint # ESLint 실행
npm run lint:fix # ESLint 자동 수정
npm test # 테스트 실행
npm run test:ui # 테스트 UI 모드
npm run test:coverage # 테스트 커버리지 확인
```
## Key Files & Project Structure
### Core Files
- `.taskmaster/tasks/tasks.json` - Main task data file (auto-managed)
- `.taskmaster/config.json` - AI model configuration (use `task-master models` to modify)
- `.taskmaster/docs/prd.txt` - Product Requirements Document for parsing
- `.taskmaster/tasks/*.txt` - Individual task files (auto-generated from tasks.json)
- `.env` - API keys for CLI usage
### Claude Code Integration Files
- `CLAUDE.md` - Auto-loaded context for Claude Code (this file)
- `.claude/settings.json` - Claude Code tool allowlist and preferences
- `.claude/commands/` - Custom slash commands for repeated workflows
- `.mcp.json` - MCP server configuration (project-specific)
### Directory Structure
```
project/
├── .taskmaster/
│ ├── tasks/ # Task files directory
│ │ ├── tasks.json # Main task database
│ │ ├── task-1.md # Individual task files
│ │ └── task-2.md
│ ├── docs/ # Documentation directory
│ │ ├── prd.txt # Product requirements
│ ├── reports/ # Analysis reports directory
│ │ └── task-complexity-report.json
│ ├── templates/ # Template files
│ │ └── example_prd.txt # Example PRD template
│ └── config.json # AI models & settings
├── .claude/
│ ├── settings.json # Claude Code configuration
│ └── commands/ # Custom slash commands
├── .env # API keys
├── .mcp.json # MCP configuration
└── CLAUDE.md # This file - auto-loaded by Claude Code
```
## MCP Integration
Task Master provides an MCP server that Claude Code can connect to. Configure in `.mcp.json`:
```json
{
"mcpServers": {
"task-master-ai": {
"command": "npx",
"args": ["-y", "--package=task-master-ai", "task-master-ai"],
"env": {
"ANTHROPIC_API_KEY": "your_key_here",
"PERPLEXITY_API_KEY": "your_key_here",
"OPENAI_API_KEY": "OPENAI_API_KEY_HERE",
"GOOGLE_API_KEY": "GOOGLE_API_KEY_HERE",
"XAI_API_KEY": "XAI_API_KEY_HERE",
"OPENROUTER_API_KEY": "OPENROUTER_API_KEY_HERE",
"MISTRAL_API_KEY": "MISTRAL_API_KEY_HERE",
"AZURE_OPENAI_API_KEY": "AZURE_OPENAI_API_KEY_HERE",
"OLLAMA_API_KEY": "OLLAMA_API_KEY_HERE"
}
}
}
}
```
### Essential MCP Tools
```javascript
help; // = shows available taskmaster commands
// Project setup
initialize_project; // = task-master init
parse_prd; // = task-master parse-prd
// Daily workflow
get_tasks; // = task-master list
next_task; // = task-master next
get_task; // = task-master show <id>
set_task_status; // = task-master set-status
// Task management
add_task; // = task-master add-task
expand_task; // = task-master expand
update_task; // = task-master update-task
update_subtask; // = task-master update-subtask
update; // = task-master update
// Analysis
analyze_project_complexity; // = task-master analyze-complexity
complexity_report; // = task-master complexity-report
```
## Claude Code Workflow Integration
### Standard Development Workflow
#### 1. Project Initialization
### Task Master 명령어
```bash
# Initialize Task Master
task-master init
# Create or obtain PRD, then parse it
task-master parse-prd .taskmaster/docs/prd.txt
# Analyze complexity and expand tasks
task-master analyze-complexity --research
task-master expand --all --research
task-master next # 다음 작업 확인
task-master list # 모든 작업 목록
task-master show <id> # 특정 작업 상세 정보
task-master set-status --id=<id> --status=done # 작업 완료 표시
```
If tasks already exist, another PRD can be parsed (with new information only!) using parse-prd with --append flag. This will add the generated tasks to the existing list of tasks..
## 코딩 컨벤션
#### 2. Daily Development Loop
### TypeScript
- 모든 파일에 엄격한 타입 정의 사용
- `any` 타입 사용 금지
- 인터페이스와 타입 별칭 적절히 활용
- Enum보다 const assertion 선호
```bash
# Start each session
task-master next # Find next available task
task-master show <id> # Review task details
### React 컴포넌트
- 함수형 컴포넌트 사용
- Props 인터페이스 명시적 정의
- 커스텀 훅으로 로직 분리
- `React.FC` 타입 명시적 사용
# During implementation, check in code context into the tasks and subtasks
task-master update-subtask --id=<id> --prompt="implementation notes..."
### 스타일링
- Tailwind CSS 유틸리티 클래스 사용
- 커스텀 CSS는 최소화
- 반응형 디자인 고려
- 일관된 컬러 팔레트 사용
# Complete tasks
task-master set-status --id=<id> --status=done
### 폴더 및 파일 명명
- 컴포넌트: PascalCase (예: `TransactionCard.tsx`)
- 훅: camelCase with 'use' prefix (예: `useTransactions.ts`)
- 유틸리티: camelCase (예: `formatCurrency.ts`)
- 타입: PascalCase (예: `Transaction.ts`)
## 테스트 전략
### 단위 테스트
- 모든 유틸리티 함수 테스트
- 컴포넌트 렌더링 테스트
- 사용자 상호작용 테스트
- 에러 케이스 테스트
### 통합 테스트
- API 호출 흐름 테스트
- 상태 관리 통합 테스트
- 라우팅 테스트
### 테스트 커버리지 목표
- 라인 커버리지: 80% 이상
- 함수 커버리지: 70% 이상
- 브랜치 커버리지: 70% 이상
## 환경 변수
개발에 필요한 환경 변수들:
```env
# Appwrite 설정
VITE_APPWRITE_URL=https://your-appwrite-url
VITE_APPWRITE_PROJECT_ID=your-project-id
VITE_APPWRITE_DATABASE_ID=your-database-id
VITE_APPWRITE_TRANSACTIONS_COLLECTION_ID=your-collection-id
# 개발 모드 설정
NODE_ENV=development
```
#### 3. Multi-Claude Workflows
For complex projects, use multiple Claude Code sessions:
```bash
# Terminal 1: Main implementation
cd project && claude
# Terminal 2: Testing and validation
cd project-test-worktree && claude
# Terminal 3: Documentation updates
cd project-docs-worktree && claude
```
### Custom Slash Commands
Create `.claude/commands/taskmaster-next.md`:
```markdown
Find the next available Task Master task and show its details.
Steps:
1. Run `task-master next` to get the next task
2. If a task is available, run `task-master show <id>` for full details
3. Provide a summary of what needs to be implemented
4. Suggest the first implementation step
```
Create `.claude/commands/taskmaster-complete.md`:
```markdown
Complete a Task Master task: $ARGUMENTS
Steps:
1. Review the current task with `task-master show $ARGUMENTS`
2. Verify all implementation is complete
3. Run any tests related to this task
4. Mark as complete: `task-master set-status --id=$ARGUMENTS --status=done`
5. Show the next available task with `task-master next`
```
## Tool Allowlist Recommendations
Add to `.claude/settings.json`:
```json
{
"allowedTools": [
"Edit",
"Bash(task-master *)",
"Bash(git commit:*)",
"Bash(git add:*)",
"Bash(npm run *)",
"mcp__task_master_ai__*"
]
}
```
## Configuration & Setup
### API Keys Required
At least **one** of these API keys must be configured:
- `ANTHROPIC_API_KEY` (Claude models) - **Recommended**
- `PERPLEXITY_API_KEY` (Research features) - **Highly recommended**
- `OPENAI_API_KEY` (GPT models)
- `GOOGLE_API_KEY` (Gemini models)
- `MISTRAL_API_KEY` (Mistral models)
- `OPENROUTER_API_KEY` (Multiple models)
- `XAI_API_KEY` (Grok models)
An API key is required for any provider used across any of the 3 roles defined in the `models` command.
### Model Configuration
```bash
# Interactive setup (recommended)
task-master models --setup
# Set specific models
task-master models --set-main claude-3-5-sonnet-20241022
task-master models --set-research perplexity-llama-3.1-sonar-large-128k-online
task-master models --set-fallback gpt-4o-mini
```
## Task Structure & IDs
### Task ID Format
- Main tasks: `1`, `2`, `3`, etc.
- Subtasks: `1.1`, `1.2`, `2.1`, etc.
- Sub-subtasks: `1.1.1`, `1.1.2`, etc.
### Task Status Values
- `pending` - Ready to work on
- `in-progress` - Currently being worked on
- `done` - Completed and verified
- `deferred` - Postponed
- `cancelled` - No longer needed
- `blocked` - Waiting on external factors
### Task Fields
```json
{
"id": "1.2",
"title": "Implement user authentication",
"description": "Set up JWT-based auth system",
"status": "pending",
"priority": "high",
"dependencies": ["1.1"],
"details": "Use bcrypt for hashing, JWT for tokens...",
"testStrategy": "Unit tests for auth functions, integration tests for login flow",
"subtasks": []
}
```
## Claude Code Best Practices with Task Master
### Context Management
- Use `/clear` between different tasks to maintain focus
- This CLAUDE.md file is automatically loaded for context
- Use `task-master show <id>` to pull specific task context when needed
### Iterative Implementation
1. `task-master show <subtask-id>` - Understand requirements
2. Explore codebase and plan implementation
3. `task-master update-subtask --id=<id> --prompt="detailed plan"` - Log plan
4. `task-master set-status --id=<id> --status=in-progress` - Start work
5. Implement code following logged plan
6. `task-master update-subtask --id=<id> --prompt="what worked/didn't work"` - Log progress
7. `task-master set-status --id=<id> --status=done` - Complete task
### Complex Workflows with Checklists
For large migrations or multi-step processes:
1. Create a markdown PRD file describing the new changes: `touch task-migration-checklist.md` (prds can be .txt or .md)
2. Use Taskmaster to parse the new prd with `task-master parse-prd --append` (also available in MCP)
3. Use Taskmaster to expand the newly generated tasks into subtasks. Consdier using `analyze-complexity` with the correct --to and --from IDs (the new ids) to identify the ideal subtask amounts for each task. Then expand them.
4. Work through items systematically, checking them off as completed
5. Use `task-master update-subtask` to log progress on each task/subtask and/or updating/researching them before/during implementation if getting stuck
### Git Integration
Task Master works well with `gh` CLI:
```bash
# Create PR for completed task
gh pr create --title "Complete task 1.2: User authentication" --body "Implements JWT auth system as specified in task 1.2"
# Reference task in commits
git commit -m "feat: implement JWT auth (task 1.2)"
```
### Parallel Development with Git Worktrees
```bash
# Create worktrees for parallel task development
git worktree add ../project-auth feature/auth-system
git worktree add ../project-api feature/api-refactor
# Run Claude Code in each worktree
cd ../project-auth && claude # Terminal 1: Auth work
cd ../project-api && claude # Terminal 2: API work
```
## Troubleshooting
### AI Commands Failing
```bash
# Check API keys are configured
cat .env # For CLI usage
# Verify model configuration
task-master models
# Test with different model
task-master models --set-fallback gpt-4o-mini
```
### MCP Connection Issues
- Check `.mcp.json` configuration
- Verify Node.js installation
- Use `--mcp-debug` flag when starting Claude Code
- Use CLI as fallback if MCP unavailable
### Task File Sync Issues
```bash
# Regenerate task files from tasks.json
task-master generate
# Fix dependency issues
task-master fix-dependencies
```
DO NOT RE-INITIALIZE. That will not do anything beyond re-adding the same Taskmaster core files.
## Important Notes
### AI-Powered Operations
These commands make AI calls and may take up to a minute:
- `parse_prd` / `task-master parse-prd`
- `analyze_project_complexity` / `task-master analyze-complexity`
- `expand_task` / `task-master expand`
- `expand_all` / `task-master expand --all`
- `add_task` / `task-master add-task`
- `update` / `task-master update`
- `update_task` / `task-master update-task`
- `update_subtask` / `task-master update-subtask`
### File Management
- Never manually edit `tasks.json` - use commands instead
- Never manually edit `.taskmaster/config.json` - use `task-master models`
- Task markdown files in `tasks/` are auto-generated
- Run `task-master generate` after manual changes to tasks.json
### Claude Code Session Management
- Use `/clear` frequently to maintain focused context
- Create custom slash commands for repeated Task Master workflows
- Configure tool allowlist to streamline permissions
- Use headless mode for automation: `claude -p "task-master next"`
### Multi-Task Updates
- Use `update --from=<id>` to update multiple future tasks
- Use `update-task --id=<id>` for single task updates
- Use `update-subtask --id=<id>` for implementation logging
### Research Mode
- Add `--research` flag for research-based AI enhancement
- Requires a research model API key like Perplexity (`PERPLEXITY_API_KEY`) in environment
- Provides more informed task creation and updates
- Recommended for complex technical tasks
## 성능 최적화
### 현재 적용된 최적화
- React.lazy를 통한 컴포넌트 지연 로딩
- React.memo를 통한 불필요한 리렌더링 방지
- useMemo, useCallback을 통한 계산 최적화
- 이미지 지연 로딩
### 예정된 최적화
- 번들 크기 최적화
- 코드 스플리팅 개선
- 메모리 사용량 최적화
- 네트워크 요청 최적화
## 배포 및 CI/CD
### 배포 환경
- **개발**: Vite 개발 서버
- **프로덕션**: 정적 파일 빌드 후 호스팅
### CI/CD 파이프라인
- 코드 품질 검사 (ESLint, Prettier)
- 자동 테스트 실행
- 타입 체크
- 빌드 검증
## 문제 해결 가이드
### 일반적인 문제들
1. **Appwrite 연결 오류**
- 환경 변수 확인
- CORS 설정 검토
- 네트워크 상태 확인
2. **테스트 실패**
- 모킹 설정 확인
- 비동기 처리 검토
- 환경 변수 설정 확인
3. **빌드 오류**
- TypeScript 에러 수정
- 의존성 버전 확인
- 환경 변수 설정 검토
## 기여 가이드
### 개발 워크플로우
1. 작업 브랜치 생성
2. Task Master에서 작업 선택
3. 코드 작성 및 테스트
4. 코드 리뷰 요청
5. 머지 후 배포
### 코드 리뷰 체크리스트
- [ ] TypeScript 타입 안전성
- [ ] 테스트 커버리지
- [ ] 성능 최적화
- [ ] 접근성 고려
- [ ] 보안 검토
## 추가 리소스
### 관련 문서
- [React 공식 문서](https://react.dev/)
- [TypeScript 핸드북](https://www.typescriptlang.org/docs/)
- [Tailwind CSS 문서](https://tailwindcss.com/docs)
- [Appwrite 문서](https://appwrite.io/docs)
- [Vitest 문서](https://vitest.dev/)
### 프로젝트 관리
- Task Master AI를 통한 작업 추적
- 이슈 및 버그 리포팅
- 기능 요청 및 개선 사항
---
_This guide ensures Claude Code has immediate access to Task Master's essential functionality for agentic development workflows._
이 문서는 Zellyy Finance 프로젝트의 개발과 유지보수를 위한 종합 가이드입니다. 프로젝트에 기여하거나 개발을 진행할 때 참조하세요.