feat: Set up Task Master AI project management system
- Initialize Task Master AI with configuration and PRD - Create comprehensive project improvement plan (10 tasks) - Set up MCP server integration for Claude Code - Add custom slash commands and tool configurations - Generate structured task breakdown for development phases: * Phase 1: TypeScript strict mode, code quality, security * Phase 2: Zustand, TanStack Query, testing setup * Phase 3: Performance optimization, automated deployment * Phase 4: Monitoring, bundle optimization 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
hansoo
9
.claude/commands/taskmaster-complete.md
Normal file
9
.claude/commands/taskmaster-complete.md
Normal file
@@ -0,0 +1,9 @@
|
||||
Task Master 태스크 완료: $ARGUMENTS
|
||||
|
||||
단계:
|
||||
|
||||
1. `task-master show $ARGUMENTS`로 현재 태스크 검토
|
||||
2. 모든 구현이 완료되었는지 확인
|
||||
3. 해당 태스크와 관련된 테스트 실행
|
||||
4. `task-master set-status --id=$ARGUMENTS --status=done`으로 완료 표시
|
||||
5. `task-master next`로 다음 가능한 태스크 표시
|
||||
8
.claude/commands/taskmaster-next.md
Normal file
8
.claude/commands/taskmaster-next.md
Normal file
@@ -0,0 +1,8 @@
|
||||
다음 Task Master 태스크를 찾아서 상세 정보를 보여줍니다.
|
||||
|
||||
단계:
|
||||
|
||||
1. `task-master next` 실행해서 다음 태스크 확인
|
||||
2. 태스크가 있다면 `task-master show <id>` 실행해서 상세 정보 표시
|
||||
3. 구현해야 할 내용 요약 제공
|
||||
4. 첫 번째 구현 단계 제안
|
||||
18
.claude/settings.json
Normal file
18
.claude/settings.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"allowedTools": [
|
||||
"Edit",
|
||||
"MultiEdit",
|
||||
"Write",
|
||||
"Read",
|
||||
"Bash(task-master *)",
|
||||
"Bash(tm *)",
|
||||
"Bash(git commit*)",
|
||||
"Bash(git add*)",
|
||||
"Bash(npm run *)",
|
||||
"Bash(npx *)",
|
||||
"mcp__task_master_ai__*"
|
||||
],
|
||||
"mcp": {
|
||||
"configFile": ".mcp.json"
|
||||
}
|
||||
}
|
||||
10
.env.example
Normal file
10
.env.example
Normal file
@@ -0,0 +1,10 @@
|
||||
# API Keys (Required to enable respective provider)
|
||||
ANTHROPIC_API_KEY="your_anthropic_api_key_here" # Required: Format: sk-ant-api03-...
|
||||
PERPLEXITY_API_KEY="your_perplexity_api_key_here" # Optional: Format: pplx-...
|
||||
OPENAI_API_KEY="your_openai_api_key_here" # Optional, for OpenAI/OpenRouter models. Format: sk-proj-...
|
||||
GOOGLE_API_KEY="your_google_api_key_here" # Optional, for Google Gemini models.
|
||||
MISTRAL_API_KEY="your_mistral_key_here" # Optional, for Mistral AI models.
|
||||
XAI_API_KEY="YOUR_XAI_KEY_HERE" # Optional, for xAI AI models.
|
||||
AZURE_OPENAI_API_KEY="your_azure_key_here" # Optional, for Azure OpenAI models (requires endpoint in .taskmaster/config.json).
|
||||
OLLAMA_API_KEY="your_ollama_api_key_here" # Optional: For remote Ollama servers that require authentication.
|
||||
GITHUB_API_KEY="your_github_api_key_here" # Optional: For GitHub import/export features. Format: ghp_... or github_pat_...
|
||||
13
.gitignore
vendored
13
.gitignore
vendored
@@ -40,3 +40,16 @@ android/app/src/main/assets/public/
|
||||
android/gradle.properties.bak
|
||||
ios/App/Zellyy-Finance-Debug.ipa
|
||||
ios/App/Zellyy-Finance-Release.ipa
|
||||
|
||||
*.log
|
||||
dev-debug.log
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
# Environment variables
|
||||
.env
|
||||
.vscode
|
||||
# OS specific
|
||||
|
||||
# Task files
|
||||
# tasks.json
|
||||
# tasks/
|
||||
|
||||
19
.mcp.json
Normal file
19
.mcp.json
Normal file
@@ -0,0 +1,19 @@
|
||||
{
|
||||
"mcpServers": {
|
||||
"task-master-ai": {
|
||||
"command": "npx",
|
||||
"args": ["-y", "--package=task-master-ai", "task-master-ai"],
|
||||
"env": {
|
||||
"ANTHROPIC_API_KEY": "${ANTHROPIC_API_KEY}",
|
||||
"PERPLEXITY_API_KEY": "${PERPLEXITY_API_KEY}",
|
||||
"OPENAI_API_KEY": "${OPENAI_API_KEY}",
|
||||
"GOOGLE_API_KEY": "${GOOGLE_API_KEY}",
|
||||
"XAI_API_KEY": "${XAI_API_KEY}",
|
||||
"OPENROUTER_API_KEY": "${OPENROUTER_API_KEY}",
|
||||
"MISTRAL_API_KEY": "${MISTRAL_API_KEY}",
|
||||
"AZURE_OPENAI_API_KEY": "${AZURE_OPENAI_API_KEY}",
|
||||
"OLLAMA_API_KEY": "${OLLAMA_API_KEY}"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
105
.taskmaster/config.json
Normal file
105
.taskmaster/config.json
Normal file
@@ -0,0 +1,105 @@
|
||||
{
|
||||
"models": {
|
||||
"main": {
|
||||
"0": "c",
|
||||
"1": "l",
|
||||
"2": "a",
|
||||
"3": "u",
|
||||
"4": "d",
|
||||
"5": "e",
|
||||
"6": "-",
|
||||
"7": "3",
|
||||
"8": "-",
|
||||
"9": "5",
|
||||
"10": "-",
|
||||
"11": "s",
|
||||
"12": "o",
|
||||
"13": "n",
|
||||
"14": "n",
|
||||
"15": "e",
|
||||
"16": "t",
|
||||
"17": "-",
|
||||
"18": "2",
|
||||
"19": "0",
|
||||
"20": "2",
|
||||
"21": "4",
|
||||
"22": "1",
|
||||
"23": "0",
|
||||
"24": "2",
|
||||
"25": "2",
|
||||
"provider": "claude-code",
|
||||
"modelId": "sonnet",
|
||||
"maxTokens": 64000,
|
||||
"temperature": 0.2
|
||||
},
|
||||
"research": {
|
||||
"0": "p",
|
||||
"1": "e",
|
||||
"2": "r",
|
||||
"3": "p",
|
||||
"4": "l",
|
||||
"5": "e",
|
||||
"6": "x",
|
||||
"7": "i",
|
||||
"8": "t",
|
||||
"9": "y",
|
||||
"10": "-",
|
||||
"11": "l",
|
||||
"12": "l",
|
||||
"13": "a",
|
||||
"14": "m",
|
||||
"15": "a",
|
||||
"16": "-",
|
||||
"17": "3",
|
||||
"18": ".",
|
||||
"19": "1",
|
||||
"20": "-",
|
||||
"21": "s",
|
||||
"22": "o",
|
||||
"23": "n",
|
||||
"24": "a",
|
||||
"25": "r",
|
||||
"26": "-",
|
||||
"27": "l",
|
||||
"28": "a",
|
||||
"29": "r",
|
||||
"30": "g",
|
||||
"31": "e",
|
||||
"32": "-",
|
||||
"33": "1",
|
||||
"34": "2",
|
||||
"35": "8",
|
||||
"36": "k",
|
||||
"37": "-",
|
||||
"38": "o",
|
||||
"39": "n",
|
||||
"40": "l",
|
||||
"41": "i",
|
||||
"42": "n",
|
||||
"43": "e",
|
||||
"provider": "gemini-cli",
|
||||
"modelId": "gemini-2.5-pro",
|
||||
"maxTokens": 65536,
|
||||
"temperature": 0.1
|
||||
},
|
||||
"fallback": {
|
||||
"provider": "claude-code",
|
||||
"modelId": "sonnet",
|
||||
"maxTokens": 64000,
|
||||
"temperature": 0.2
|
||||
}
|
||||
},
|
||||
"global": {
|
||||
"logLevel": "info",
|
||||
"debug": false,
|
||||
"defaultNumTasks": 10,
|
||||
"defaultSubtasks": 5,
|
||||
"defaultPriority": "medium",
|
||||
"projectName": "Task Master",
|
||||
"ollamaBaseURL": "http://localhost:11434/api",
|
||||
"bedrockBaseURL": "https://bedrock.us-east-1.amazonaws.com",
|
||||
"responseLanguage": "Korean",
|
||||
"userId": "1234567890"
|
||||
},
|
||||
"claudeCode": {}
|
||||
}
|
||||
156
.taskmaster/docs/improvement-plan.md
Normal file
156
.taskmaster/docs/improvement-plan.md
Normal file
@@ -0,0 +1,156 @@
|
||||
# 젤리의 적자탈출 개선 계획 PRD
|
||||
|
||||
## 프로젝트 개요
|
||||
젤리의 적자탈출(Zellyy Finance) 프로젝트의 기술적 개선을 위한 종합적인 계획
|
||||
|
||||
## 1단계: 즉시 개선 (1주일)
|
||||
|
||||
### 1.1 TypeScript 설정 강화
|
||||
- tsconfig.json의 strict 모드 점진적 활성화
|
||||
- noImplicitAny, strictNullChecks 활성화
|
||||
- 기존 any 타입 사용 제거
|
||||
- 타입 안전성 확보
|
||||
|
||||
### 1.2 코드 품질 개선
|
||||
- console.log 81개 제거
|
||||
- 빌드 오류 수정 (SupabaseToAppwriteMigration import 오류)
|
||||
- ESLint 규칙 강화
|
||||
- Prettier 설정 추가
|
||||
|
||||
### 1.3 환경 변수 보안 강화
|
||||
- API 키 클라이언트 노출 문제 해결
|
||||
- 환경 변수 관리 개선
|
||||
- .env 파일 구조 정리
|
||||
|
||||
### 1.4 CI/CD 파이프라인 구축
|
||||
- GitHub Actions 워크플로우 설정
|
||||
- 자동 빌드 및 테스트
|
||||
- ESLint 자동 검사
|
||||
|
||||
## 2단계: 핵심 개선 (2-3주)
|
||||
|
||||
### 2.1 상태 관리 마이그레이션
|
||||
- Context API에서 Zustand로 전환
|
||||
- 보일러플레이트 코드 80% 감소
|
||||
- 타입 안전성 향상
|
||||
- 자동 메모이제이션 적용
|
||||
|
||||
### 2.2 데이터 페칭 개선
|
||||
- TanStack Query 도입
|
||||
- 자동 캐싱 및 동기화
|
||||
- 오프라인 지원 강화
|
||||
- 낙관적 업데이트 구현
|
||||
|
||||
### 2.3 테스트 코드 작성
|
||||
- Vitest + React Testing Library 설정
|
||||
- 핵심 비즈니스 로직 단위 테스트
|
||||
- 주요 사용자 플로우 통합 테스트
|
||||
- 테스트 커버리지 목표: 80%
|
||||
|
||||
### 2.4 React 성능 최적화
|
||||
- React.memo, useMemo, useCallback 적용
|
||||
- 불필요한 리렌더링 방지
|
||||
- 세션 체크 주기 최적화 (5초 → 30초)
|
||||
- 컴포넌트 레이지 로딩
|
||||
|
||||
### 2.5 자동 배포 설정
|
||||
- Vercel 자동 배포 설정
|
||||
- 환경별 배포 (스테이징/프로덕션)
|
||||
- PR 미리보기 배포
|
||||
|
||||
## 3단계: 고급 기능 (1개월)
|
||||
|
||||
### 3.1 인증 시스템 개선
|
||||
- Clerk 인증 시스템 도입
|
||||
- 카카오/네이버 소셜 로그인 추가
|
||||
- 2FA 및 생체인증 지원
|
||||
- 사용자 경험 향상
|
||||
|
||||
### 3.2 백엔드 마이그레이션
|
||||
- Appwrite에서 Supabase로 전환 고려
|
||||
- 실시간 동기화 개선
|
||||
- 오프라인 지원 강화
|
||||
- 데이터 마이그레이션 스크립트
|
||||
|
||||
### 3.3 차트 라이브러리 최적화
|
||||
- Recharts에서 Chart.js로 전환
|
||||
- 번들 크기 300KB → 100KB 감소
|
||||
- 모바일 성능 향상
|
||||
- 커스텀 차트 컴포넌트 구현
|
||||
|
||||
### 3.4 PWA 기능 추가
|
||||
- 서비스 워커 구현
|
||||
- 오프라인 캐시 전략
|
||||
- 푸시 알림 지원
|
||||
- 앱 설치 프롬프트
|
||||
|
||||
## 4단계: 최적화 및 모니터링 (2개월)
|
||||
|
||||
### 4.1 번들 크기 최적화
|
||||
- Webpack Bundle Analyzer 사용
|
||||
- 74개 dependencies 정리
|
||||
- 코드 스플리팅 적용
|
||||
- Tree shaking 최적화
|
||||
|
||||
### 4.2 모바일 빌드 자동화
|
||||
- Android/iOS 자동 빌드
|
||||
- App Store/Play Store 자동 배포
|
||||
- 버전 관리 자동화
|
||||
- 릴리즈 노트 자동 생성
|
||||
|
||||
### 4.3 모니터링 시스템 구축
|
||||
- Sentry 에러 모니터링
|
||||
- 성능 지표 추적
|
||||
- 사용자 행동 분석
|
||||
- 알림 시스템 구축
|
||||
|
||||
### 4.4 접근성 및 UX 개선
|
||||
- ARIA 라벨 추가
|
||||
- 키보드 네비게이션 지원
|
||||
- 색상 대비 개선
|
||||
- 스크린 리더 지원
|
||||
|
||||
## 성공 지표
|
||||
|
||||
### 기술적 지표
|
||||
- 빌드 시간 50% 단축
|
||||
- 앱 로딩 속도 2배 향상
|
||||
- 테스트 커버리지 80% 달성
|
||||
- 번들 크기 30% 감소
|
||||
|
||||
### 사용자 경험 지표
|
||||
- 로그인 성공률 95% 이상
|
||||
- 앱 크래시율 0.1% 이하
|
||||
- 오프라인 동작 100% 지원
|
||||
- 접근성 AA 등급 달성
|
||||
|
||||
## 위험 요소 및 대응책
|
||||
|
||||
### 기술적 위험
|
||||
- 마이그레이션 중 데이터 손실 → 백업 전략 수립
|
||||
- 성능 저하 → 단계적 적용 및 모니터링
|
||||
- 호환성 문제 → 철저한 테스트
|
||||
|
||||
### 일정 위험
|
||||
- 복잡성 과소평가 → 버퍼 시간 확보
|
||||
- 의존성 문제 → 대안 기술 준비
|
||||
- 팀 리소스 부족 → 우선순위 조정
|
||||
|
||||
## 리소스 요구사항
|
||||
|
||||
### 개발 도구
|
||||
- GitHub Actions (무료 티어)
|
||||
- Vercel (무료 티어)
|
||||
- Sentry (무료 티어)
|
||||
- Linear (무료 티어)
|
||||
|
||||
### API 서비스
|
||||
- Clerk (10,000 사용자까지 무료)
|
||||
- Supabase (500MB까지 무료)
|
||||
- 총 예상 비용: $0/월 (소규모)
|
||||
|
||||
## 다음 단계
|
||||
1. Phase 1 작업 즉시 시작
|
||||
2. 주간 진행 상황 리뷰
|
||||
3. 필요시 계획 조정
|
||||
4. 각 단계별 성과 측정
|
||||
6
.taskmaster/state.json
Normal file
6
.taskmaster/state.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"currentTag": "master",
|
||||
"lastSwitched": "2025-07-11T20:57:32.202Z",
|
||||
"branchTagMapping": {},
|
||||
"migrationNoticeShown": true
|
||||
}
|
||||
11
.taskmaster/tasks/task_001.txt
Normal file
11
.taskmaster/tasks/task_001.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 1
|
||||
# Title: TypeScript 설정 강화 및 타입 안전성 확보
|
||||
# Status: pending
|
||||
# Dependencies: None
|
||||
# Priority: high
|
||||
# Description: tsconfig.json의 strict 모드를 점진적으로 활성화하고 기존 any 타입 사용을 제거하여 타입 안전성을 확보합니다.
|
||||
# Details:
|
||||
1. tsconfig.json에서 strict: true, noImplicitAny: true, strictNullChecks: true 활성화 2. 기존 코드에서 any 타입 사용 부분 찾아서 적절한 타입으로 변경 3. 타입 에러 발생 시 단계적으로 수정 4. 컴포넌트 props와 state에 대한 인터페이스 정의 5. API 응답 데이터에 대한 타입 정의 추가
|
||||
|
||||
# Test Strategy:
|
||||
TypeScript 컴파일러 오류 0개 달성, tsc --noEmit 명령어로 타입 검사 통과 확인, IDE에서 타입 추론이 정확히 작동하는지 검증
|
||||
11
.taskmaster/tasks/task_002.txt
Normal file
11
.taskmaster/tasks/task_002.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 2
|
||||
# Title: 코드 품질 개선 및 린팅 설정
|
||||
# Status: pending
|
||||
# Dependencies: 1
|
||||
# Priority: high
|
||||
# Description: console.log 제거, 빌드 오류 수정, ESLint/Prettier 설정을 통해 코드 품질을 개선합니다.
|
||||
# Details:
|
||||
1. 프로젝트 전체에서 console.log 81개 제거 (production에서는 삭제, development에서는 logger 라이브러리 사용) 2. SupabaseToAppwriteMigration import 오류 수정 3. ESLint 규칙 강화 (@typescript-eslint/recommended, react-hooks/recommended 추가) 4. Prettier 설정 추가 (.prettierrc, .prettierignore 파일 생성) 5. pre-commit hook 설정으로 자동 포맷팅
|
||||
|
||||
# Test Strategy:
|
||||
ESLint 오류 0개, Prettier 포맷팅 자동 적용 확인, 빌드 성공 확인, 불필요한 console.log가 production 빌드에 포함되지 않는지 검증
|
||||
11
.taskmaster/tasks/task_003.txt
Normal file
11
.taskmaster/tasks/task_003.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 3
|
||||
# Title: 환경 변수 보안 강화 및 관리 개선
|
||||
# Status: pending
|
||||
# Dependencies: None
|
||||
# Priority: high
|
||||
# Description: API 키의 클라이언트 노출 문제를 해결하고 환경 변수 관리를 개선합니다.
|
||||
# Details:
|
||||
1. 클라이언트에 노출되지 말아야 할 API 키들을 서버 사이드로 이동 2. .env.example 파일 생성으로 필요한 환경 변수 문서화 3. VITE_로 시작하는 환경 변수만 클라이언트에 노출되도록 정리 4. 민감한 API 키는 서버리스 함수나 백엔드에서만 사용 5. 환경별 설정 파일 분리 (.env.local, .env.production)
|
||||
|
||||
# Test Strategy:
|
||||
빌드된 클라이언트 코드에서 민감한 API 키가 노출되지 않는지 확인, 환경 변수가 올바르게 로드되는지 각 환경에서 테스트
|
||||
11
.taskmaster/tasks/task_004.txt
Normal file
11
.taskmaster/tasks/task_004.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 4
|
||||
# Title: CI/CD 파이프라인 구축
|
||||
# Status: pending
|
||||
# Dependencies: 2
|
||||
# Priority: medium
|
||||
# Description: GitHub Actions를 사용하여 자동 빌드, 테스트, ESLint 검사를 수행하는 워크플로우를 설정합니다.
|
||||
# Details:
|
||||
1. .github/workflows/ci.yml 파일 생성 2. Node.js 환경 설정 및 의존성 설치 3. TypeScript 빌드 및 타입 검사 4. ESLint 및 Prettier 검사 자동화 5. 테스트 실행 (나중에 추가될 테스트들) 6. 빌드 아티팩트 생성 및 저장 7. PR에서 자동 검사 실행
|
||||
|
||||
# Test Strategy:
|
||||
GitHub Actions 워크플로우가 성공적으로 실행되는지 확인, PR 생성 시 자동 검사가 동작하는지 검증, 빌드 실패 시 적절한 에러 메시지 출력 확인
|
||||
11
.taskmaster/tasks/task_005.txt
Normal file
11
.taskmaster/tasks/task_005.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 5
|
||||
# Title: 상태 관리를 Context API에서 Zustand로 마이그레이션
|
||||
# Status: pending
|
||||
# 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:
|
||||
상태 변경이 예상대로 동작하는지 확인, 컴포넌트 리렌더링 횟수 감소 확인, 개발자 도구에서 상태 추적 가능 확인
|
||||
11
.taskmaster/tasks/task_006.txt
Normal file
11
.taskmaster/tasks/task_006.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 6
|
||||
# Title: TanStack Query를 사용한 데이터 페칭 개선
|
||||
# Status: pending
|
||||
# Dependencies: 5
|
||||
# Priority: medium
|
||||
# Description: TanStack Query를 도입하여 자동 캐싱, 동기화, 오프라인 지원을 구현합니다.
|
||||
# Details:
|
||||
1. @tanstack/react-query 설치 및 QueryClient 설정 2. API 호출 함수들을 React Query hooks로 전환 3. 자동 캐싱 전략 설정 (staleTime, cacheTime) 4. 낙관적 업데이트 구현 (optimistic updates) 5. 오프라인 상태에서의 데이터 처리 6. 백그라운드 refetch 설정 7. 에러 처리 및 재시도 로직 구현
|
||||
|
||||
# Test Strategy:
|
||||
데이터 캐싱이 올바르게 동작하는지 확인, 오프라인 상태에서 캐시된 데이터 접근 가능 확인, 낙관적 업데이트 시나리오 테스트
|
||||
11
.taskmaster/tasks/task_007.txt
Normal file
11
.taskmaster/tasks/task_007.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 7
|
||||
# Title: 테스트 환경 설정 및 핵심 로직 테스트 작성
|
||||
# Status: pending
|
||||
# Dependencies: 4
|
||||
# Priority: medium
|
||||
# Description: Vitest와 React Testing Library를 설정하고 핵심 비즈니스 로직과 주요 사용자 플로우에 대한 테스트를 작성합니다.
|
||||
# Details:
|
||||
1. Vitest 및 React Testing Library 설치 및 설정 2. 테스트 환경 설정 파일 생성 (vitest.config.ts) 3. 핵심 비즈니스 로직 단위 테스트 작성 4. 주요 컴포넌트 렌더링 테스트 5. 사용자 인터랙션 테스트 (로그인, 데이터 입력 등) 6. API 모킹 설정 7. 테스트 커버리지 80% 목표 달성
|
||||
|
||||
# Test Strategy:
|
||||
모든 테스트가 통과하는지 확인, 테스트 커버리지 리포트 생성, CI/CD 파이프라인에서 테스트 자동 실행 확인
|
||||
11
.taskmaster/tasks/task_008.txt
Normal file
11
.taskmaster/tasks/task_008.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 8
|
||||
# Title: React 성능 최적화 구현
|
||||
# Status: pending
|
||||
# Dependencies: 6
|
||||
# Priority: medium
|
||||
# Description: React.memo, useMemo, useCallback을 적용하고 불필요한 리렌더링을 방지하여 앱 성능을 향상시킵니다.
|
||||
# Details:
|
||||
1. React DevTools Profiler를 사용한 성능 분석 2. 자주 리렌더링되는 컴포넌트에 React.memo 적용 3. 계산 비용이 높은 로직에 useMemo 적용 4. 콜백 함수에 useCallback 적용 5. 세션 체크 주기를 5초에서 30초로 조정 6. 컴포넌트 레이지 로딩 구현 (React.lazy, Suspense) 7. 이미지 최적화 및 지연 로딩
|
||||
|
||||
# Test Strategy:
|
||||
React DevTools에서 리렌더링 횟수 감소 확인, 앱 로딩 속도 2배 향상 측정, 메모리 사용량 최적화 확인
|
||||
11
.taskmaster/tasks/task_009.txt
Normal file
11
.taskmaster/tasks/task_009.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 9
|
||||
# Title: Vercel 자동 배포 설정
|
||||
# Status: pending
|
||||
# Dependencies: 4
|
||||
# Priority: low
|
||||
# Description: Vercel을 사용하여 자동 배포 환경을 구축하고 환경별 배포와 PR 미리보기를 설정합니다.
|
||||
# Details:
|
||||
1. Vercel 프로젝트 연결 및 GitHub 통합 2. 환경별 배포 설정 (프로덕션, 스테이징) 3. 환경 변수 Vercel 대시보드에서 설정 4. PR 생성 시 미리보기 배포 자동 생성 5. 빌드 최적화 설정 6. 도메인 연결 및 SSL 인증서 설정 7. 배포 후 알림 설정
|
||||
|
||||
# Test Strategy:
|
||||
자동 배포가 성공적으로 이루어지는지 확인, PR 미리보기 배포 동작 확인, 환경별로 올바른 환경 변수가 적용되는지 검증
|
||||
11
.taskmaster/tasks/task_010.txt
Normal file
11
.taskmaster/tasks/task_010.txt
Normal file
@@ -0,0 +1,11 @@
|
||||
# Task ID: 10
|
||||
# Title: 모니터링 시스템 구축 및 번들 최적화
|
||||
# Status: pending
|
||||
# Dependencies: 8, 9
|
||||
# Priority: low
|
||||
# Description: Sentry를 사용한 에러 모니터링을 설정하고 웹팩 번들 분석을 통해 번들 크기를 최적화합니다.
|
||||
# Details:
|
||||
1. Sentry 설치 및 설정 (에러 모니터링, 성능 추적) 2. Webpack Bundle Analyzer를 사용한 번들 분석 3. 불필요한 의존성 제거 (74개 dependencies 정리) 4. 코드 스플리팅 적용으로 초기 로딩 최적화 5. Tree shaking 최적화 6. 사용자 행동 분석을 위한 기본 이벤트 트래킹 7. 성능 지표 대시보드 구성
|
||||
|
||||
# Test Strategy:
|
||||
Sentry에서 에러가 올바르게 수집되는지 확인, 번들 크기 30% 감소 달성 확인, 앱 로딩 속도 개선 측정
|
||||
256
.taskmaster/tasks/tasks.json
Normal file
256
.taskmaster/tasks/tasks.json
Normal file
@@ -0,0 +1,256 @@
|
||||
{
|
||||
"tasks": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "TypeScript 설정 강화 및 타입 안전성 확보",
|
||||
"description": "tsconfig.json의 strict 모드를 점진적으로 활성화하고 기존 any 타입 사용을 제거하여 타입 안전성을 확보합니다.",
|
||||
"details": "1. tsconfig.json에서 strict: true, noImplicitAny: true, strictNullChecks: true 활성화 2. 기존 코드에서 any 타입 사용 부분 찾아서 적절한 타입으로 변경 3. 타입 에러 발생 시 단계적으로 수정 4. 컴포넌트 props와 state에 대한 인터페이스 정의 5. API 응답 데이터에 대한 타입 정의 추가",
|
||||
"testStrategy": "TypeScript 컴파일러 오류 0개 달성, tsc --noEmit 명령어로 타입 검사 통과 확인, IDE에서 타입 추론이 정확히 작동하는지 검증",
|
||||
"priority": "high",
|
||||
"dependencies": [],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "코드 품질 개선 및 린팅 설정",
|
||||
"description": "console.log 제거, 빌드 오류 수정, ESLint/Prettier 설정을 통해 코드 품질을 개선합니다.",
|
||||
"details": "1. 프로젝트 전체에서 console.log 81개 제거 (production에서는 삭제, development에서는 logger 라이브러리 사용) 2. SupabaseToAppwriteMigration import 오류 수정 3. ESLint 규칙 강화 (@typescript-eslint/recommended, react-hooks/recommended 추가) 4. Prettier 설정 추가 (.prettierrc, .prettierignore 파일 생성) 5. pre-commit hook 설정으로 자동 포맷팅",
|
||||
"testStrategy": "ESLint 오류 0개, Prettier 포맷팅 자동 적용 확인, 빌드 성공 확인, 불필요한 console.log가 production 빌드에 포함되지 않는지 검증",
|
||||
"priority": "high",
|
||||
"dependencies": [1],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "환경 변수 보안 강화 및 관리 개선",
|
||||
"description": "API 키의 클라이언트 노출 문제를 해결하고 환경 변수 관리를 개선합니다.",
|
||||
"details": "1. 클라이언트에 노출되지 말아야 할 API 키들을 서버 사이드로 이동 2. .env.example 파일 생성으로 필요한 환경 변수 문서화 3. VITE_로 시작하는 환경 변수만 클라이언트에 노출되도록 정리 4. 민감한 API 키는 서버리스 함수나 백엔드에서만 사용 5. 환경별 설정 파일 분리 (.env.local, .env.production)",
|
||||
"testStrategy": "빌드된 클라이언트 코드에서 민감한 API 키가 노출되지 않는지 확인, 환경 변수가 올바르게 로드되는지 각 환경에서 테스트",
|
||||
"priority": "high",
|
||||
"dependencies": [],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "CI/CD 파이프라인 구축",
|
||||
"description": "GitHub Actions를 사용하여 자동 빌드, 테스트, ESLint 검사를 수행하는 워크플로우를 설정합니다.",
|
||||
"details": "1. .github/workflows/ci.yml 파일 생성 2. Node.js 환경 설정 및 의존성 설치 3. TypeScript 빌드 및 타입 검사 4. ESLint 및 Prettier 검사 자동화 5. 테스트 실행 (나중에 추가될 테스트들) 6. 빌드 아티팩트 생성 및 저장 7. PR에서 자동 검사 실행",
|
||||
"testStrategy": "GitHub Actions 워크플로우가 성공적으로 실행되는지 확인, PR 생성 시 자동 검사가 동작하는지 검증, 빌드 실패 시 적절한 에러 메시지 출력 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [2],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "상태 관리를 Context API에서 Zustand로 마이그레이션",
|
||||
"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 연동 설정",
|
||||
"testStrategy": "상태 변경이 예상대로 동작하는지 확인, 컴포넌트 리렌더링 횟수 감소 확인, 개발자 도구에서 상태 추적 가능 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [1],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "TanStack Query를 사용한 데이터 페칭 개선",
|
||||
"description": "TanStack Query를 도입하여 자동 캐싱, 동기화, 오프라인 지원을 구현합니다.",
|
||||
"details": "1. @tanstack/react-query 설치 및 QueryClient 설정 2. API 호출 함수들을 React Query hooks로 전환 3. 자동 캐싱 전략 설정 (staleTime, cacheTime) 4. 낙관적 업데이트 구현 (optimistic updates) 5. 오프라인 상태에서의 데이터 처리 6. 백그라운드 refetch 설정 7. 에러 처리 및 재시도 로직 구현",
|
||||
"testStrategy": "데이터 캐싱이 올바르게 동작하는지 확인, 오프라인 상태에서 캐시된 데이터 접근 가능 확인, 낙관적 업데이트 시나리오 테스트",
|
||||
"priority": "medium",
|
||||
"dependencies": [5],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "테스트 환경 설정 및 핵심 로직 테스트 작성",
|
||||
"description": "Vitest와 React Testing Library를 설정하고 핵심 비즈니스 로직과 주요 사용자 플로우에 대한 테스트를 작성합니다.",
|
||||
"details": "1. Vitest 및 React Testing Library 설치 및 설정 2. 테스트 환경 설정 파일 생성 (vitest.config.ts) 3. 핵심 비즈니스 로직 단위 테스트 작성 4. 주요 컴포넌트 렌더링 테스트 5. 사용자 인터랙션 테스트 (로그인, 데이터 입력 등) 6. API 모킹 설정 7. 테스트 커버리지 80% 목표 달성",
|
||||
"testStrategy": "모든 테스트가 통과하는지 확인, 테스트 커버리지 리포트 생성, CI/CD 파이프라인에서 테스트 자동 실행 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [4],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "React 성능 최적화 구현",
|
||||
"description": "React.memo, useMemo, useCallback을 적용하고 불필요한 리렌더링을 방지하여 앱 성능을 향상시킵니다.",
|
||||
"details": "1. React DevTools Profiler를 사용한 성능 분석 2. 자주 리렌더링되는 컴포넌트에 React.memo 적용 3. 계산 비용이 높은 로직에 useMemo 적용 4. 콜백 함수에 useCallback 적용 5. 세션 체크 주기를 5초에서 30초로 조정 6. 컴포넌트 레이지 로딩 구현 (React.lazy, Suspense) 7. 이미지 최적화 및 지연 로딩",
|
||||
"testStrategy": "React DevTools에서 리렌더링 횟수 감소 확인, 앱 로딩 속도 2배 향상 측정, 메모리 사용량 최적화 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [6],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "Vercel 자동 배포 설정",
|
||||
"description": "Vercel을 사용하여 자동 배포 환경을 구축하고 환경별 배포와 PR 미리보기를 설정합니다.",
|
||||
"details": "1. Vercel 프로젝트 연결 및 GitHub 통합 2. 환경별 배포 설정 (프로덕션, 스테이징) 3. 환경 변수 Vercel 대시보드에서 설정 4. PR 생성 시 미리보기 배포 자동 생성 5. 빌드 최적화 설정 6. 도메인 연결 및 SSL 인증서 설정 7. 배포 후 알림 설정",
|
||||
"testStrategy": "자동 배포가 성공적으로 이루어지는지 확인, PR 미리보기 배포 동작 확인, 환경별로 올바른 환경 변수가 적용되는지 검증",
|
||||
"priority": "low",
|
||||
"dependencies": [4],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "모니터링 시스템 구축 및 번들 최적화",
|
||||
"description": "Sentry를 사용한 에러 모니터링을 설정하고 웹팩 번들 분석을 통해 번들 크기를 최적화합니다.",
|
||||
"details": "1. Sentry 설치 및 설정 (에러 모니터링, 성능 추적) 2. Webpack Bundle Analyzer를 사용한 번들 분석 3. 불필요한 의존성 제거 (74개 dependencies 정리) 4. 코드 스플리팅 적용으로 초기 로딩 최적화 5. Tree shaking 최적화 6. 사용자 행동 분석을 위한 기본 이벤트 트래킹 7. 성능 지표 대시보드 구성",
|
||||
"testStrategy": "Sentry에서 에러가 올바르게 수집되는지 확인, 번들 크기 30% 감소 달성 확인, 앱 로딩 속도 개선 측정",
|
||||
"priority": "low",
|
||||
"dependencies": [8, 9],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"version": "1.0.0",
|
||||
"created": "2025-01-11",
|
||||
"lastModified": "2025-01-11",
|
||||
"project": "젤리의 적자탈출 개선 프로젝트"
|
||||
},
|
||||
"master": {
|
||||
"tasks": [
|
||||
{
|
||||
"id": 1,
|
||||
"title": "TypeScript 설정 강화 및 타입 안전성 확보",
|
||||
"description": "tsconfig.json의 strict 모드를 점진적으로 활성화하고 기존 any 타입 사용을 제거하여 타입 안전성을 확보합니다.",
|
||||
"details": "1. tsconfig.json에서 strict: true, noImplicitAny: true, strictNullChecks: true 활성화 2. 기존 코드에서 any 타입 사용 부분 찾아서 적절한 타입으로 변경 3. 타입 에러 발생 시 단계적으로 수정 4. 컴포넌트 props와 state에 대한 인터페이스 정의 5. API 응답 데이터에 대한 타입 정의 추가",
|
||||
"testStrategy": "TypeScript 컴파일러 오류 0개 달성, tsc --noEmit 명령어로 타입 검사 통과 확인, IDE에서 타입 추론이 정확히 작동하는지 검증",
|
||||
"priority": "high",
|
||||
"dependencies": [],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 2,
|
||||
"title": "코드 품질 개선 및 린팅 설정",
|
||||
"description": "console.log 제거, 빌드 오류 수정, ESLint/Prettier 설정을 통해 코드 품질을 개선합니다.",
|
||||
"details": "1. 프로젝트 전체에서 console.log 81개 제거 (production에서는 삭제, development에서는 logger 라이브러리 사용) 2. SupabaseToAppwriteMigration import 오류 수정 3. ESLint 규칙 강화 (@typescript-eslint/recommended, react-hooks/recommended 추가) 4. Prettier 설정 추가 (.prettierrc, .prettierignore 파일 생성) 5. pre-commit hook 설정으로 자동 포맷팅",
|
||||
"testStrategy": "ESLint 오류 0개, Prettier 포맷팅 자동 적용 확인, 빌드 성공 확인, 불필요한 console.log가 production 빌드에 포함되지 않는지 검증",
|
||||
"priority": "high",
|
||||
"dependencies": [
|
||||
1
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 3,
|
||||
"title": "환경 변수 보안 강화 및 관리 개선",
|
||||
"description": "API 키의 클라이언트 노출 문제를 해결하고 환경 변수 관리를 개선합니다.",
|
||||
"details": "1. 클라이언트에 노출되지 말아야 할 API 키들을 서버 사이드로 이동 2. .env.example 파일 생성으로 필요한 환경 변수 문서화 3. VITE_로 시작하는 환경 변수만 클라이언트에 노출되도록 정리 4. 민감한 API 키는 서버리스 함수나 백엔드에서만 사용 5. 환경별 설정 파일 분리 (.env.local, .env.production)",
|
||||
"testStrategy": "빌드된 클라이언트 코드에서 민감한 API 키가 노출되지 않는지 확인, 환경 변수가 올바르게 로드되는지 각 환경에서 테스트",
|
||||
"priority": "high",
|
||||
"dependencies": [],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 4,
|
||||
"title": "CI/CD 파이프라인 구축",
|
||||
"description": "GitHub Actions를 사용하여 자동 빌드, 테스트, ESLint 검사를 수행하는 워크플로우를 설정합니다.",
|
||||
"details": "1. .github/workflows/ci.yml 파일 생성 2. Node.js 환경 설정 및 의존성 설치 3. TypeScript 빌드 및 타입 검사 4. ESLint 및 Prettier 검사 자동화 5. 테스트 실행 (나중에 추가될 테스트들) 6. 빌드 아티팩트 생성 및 저장 7. PR에서 자동 검사 실행",
|
||||
"testStrategy": "GitHub Actions 워크플로우가 성공적으로 실행되는지 확인, PR 생성 시 자동 검사가 동작하는지 검증, 빌드 실패 시 적절한 에러 메시지 출력 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [
|
||||
2
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 5,
|
||||
"title": "상태 관리를 Context API에서 Zustand로 마이그레이션",
|
||||
"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 연동 설정",
|
||||
"testStrategy": "상태 변경이 예상대로 동작하는지 확인, 컴포넌트 리렌더링 횟수 감소 확인, 개발자 도구에서 상태 추적 가능 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [
|
||||
1
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 6,
|
||||
"title": "TanStack Query를 사용한 데이터 페칭 개선",
|
||||
"description": "TanStack Query를 도입하여 자동 캐싱, 동기화, 오프라인 지원을 구현합니다.",
|
||||
"details": "1. @tanstack/react-query 설치 및 QueryClient 설정 2. API 호출 함수들을 React Query hooks로 전환 3. 자동 캐싱 전략 설정 (staleTime, cacheTime) 4. 낙관적 업데이트 구현 (optimistic updates) 5. 오프라인 상태에서의 데이터 처리 6. 백그라운드 refetch 설정 7. 에러 처리 및 재시도 로직 구현",
|
||||
"testStrategy": "데이터 캐싱이 올바르게 동작하는지 확인, 오프라인 상태에서 캐시된 데이터 접근 가능 확인, 낙관적 업데이트 시나리오 테스트",
|
||||
"priority": "medium",
|
||||
"dependencies": [
|
||||
5
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 7,
|
||||
"title": "테스트 환경 설정 및 핵심 로직 테스트 작성",
|
||||
"description": "Vitest와 React Testing Library를 설정하고 핵심 비즈니스 로직과 주요 사용자 플로우에 대한 테스트를 작성합니다.",
|
||||
"details": "1. Vitest 및 React Testing Library 설치 및 설정 2. 테스트 환경 설정 파일 생성 (vitest.config.ts) 3. 핵심 비즈니스 로직 단위 테스트 작성 4. 주요 컴포넌트 렌더링 테스트 5. 사용자 인터랙션 테스트 (로그인, 데이터 입력 등) 6. API 모킹 설정 7. 테스트 커버리지 80% 목표 달성",
|
||||
"testStrategy": "모든 테스트가 통과하는지 확인, 테스트 커버리지 리포트 생성, CI/CD 파이프라인에서 테스트 자동 실행 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [
|
||||
4
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 8,
|
||||
"title": "React 성능 최적화 구현",
|
||||
"description": "React.memo, useMemo, useCallback을 적용하고 불필요한 리렌더링을 방지하여 앱 성능을 향상시킵니다.",
|
||||
"details": "1. React DevTools Profiler를 사용한 성능 분석 2. 자주 리렌더링되는 컴포넌트에 React.memo 적용 3. 계산 비용이 높은 로직에 useMemo 적용 4. 콜백 함수에 useCallback 적용 5. 세션 체크 주기를 5초에서 30초로 조정 6. 컴포넌트 레이지 로딩 구현 (React.lazy, Suspense) 7. 이미지 최적화 및 지연 로딩",
|
||||
"testStrategy": "React DevTools에서 리렌더링 횟수 감소 확인, 앱 로딩 속도 2배 향상 측정, 메모리 사용량 최적화 확인",
|
||||
"priority": "medium",
|
||||
"dependencies": [
|
||||
6
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 9,
|
||||
"title": "Vercel 자동 배포 설정",
|
||||
"description": "Vercel을 사용하여 자동 배포 환경을 구축하고 환경별 배포와 PR 미리보기를 설정합니다.",
|
||||
"details": "1. Vercel 프로젝트 연결 및 GitHub 통합 2. 환경별 배포 설정 (프로덕션, 스테이징) 3. 환경 변수 Vercel 대시보드에서 설정 4. PR 생성 시 미리보기 배포 자동 생성 5. 빌드 최적화 설정 6. 도메인 연결 및 SSL 인증서 설정 7. 배포 후 알림 설정",
|
||||
"testStrategy": "자동 배포가 성공적으로 이루어지는지 확인, PR 미리보기 배포 동작 확인, 환경별로 올바른 환경 변수가 적용되는지 검증",
|
||||
"priority": "low",
|
||||
"dependencies": [
|
||||
4
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
},
|
||||
{
|
||||
"id": 10,
|
||||
"title": "모니터링 시스템 구축 및 번들 최적화",
|
||||
"description": "Sentry를 사용한 에러 모니터링을 설정하고 웹팩 번들 분석을 통해 번들 크기를 최적화합니다.",
|
||||
"details": "1. Sentry 설치 및 설정 (에러 모니터링, 성능 추적) 2. Webpack Bundle Analyzer를 사용한 번들 분석 3. 불필요한 의존성 제거 (74개 dependencies 정리) 4. 코드 스플리팅 적용으로 초기 로딩 최적화 5. Tree shaking 최적화 6. 사용자 행동 분석을 위한 기본 이벤트 트래킹 7. 성능 지표 대시보드 구성",
|
||||
"testStrategy": "Sentry에서 에러가 올바르게 수집되는지 확인, 번들 크기 30% 감소 달성 확인, 앱 로딩 속도 개선 측정",
|
||||
"priority": "low",
|
||||
"dependencies": [
|
||||
8,
|
||||
9
|
||||
],
|
||||
"status": "pending",
|
||||
"subtasks": []
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"created": "2025-07-11T21:00:35.577Z",
|
||||
"updated": "2025-07-11T21:00:35.577Z",
|
||||
"description": "Tasks for master context"
|
||||
}
|
||||
}
|
||||
}
|
||||
47
.taskmaster/templates/example_prd.txt
Normal file
47
.taskmaster/templates/example_prd.txt
Normal file
@@ -0,0 +1,47 @@
|
||||
<context>
|
||||
# Overview
|
||||
[Provide a high-level overview of your product here. Explain what problem it solves, who it's for, and why it's valuable.]
|
||||
|
||||
# Core Features
|
||||
[List and describe the main features of your product. For each feature, include:
|
||||
- What it does
|
||||
- Why it's important
|
||||
- How it works at a high level]
|
||||
|
||||
# User Experience
|
||||
[Describe the user journey and experience. Include:
|
||||
- User personas
|
||||
- Key user flows
|
||||
- UI/UX considerations]
|
||||
</context>
|
||||
<PRD>
|
||||
# Technical Architecture
|
||||
[Outline the technical implementation details:
|
||||
- System components
|
||||
- Data models
|
||||
- APIs and integrations
|
||||
- Infrastructure requirements]
|
||||
|
||||
# Development Roadmap
|
||||
[Break down the development process into phases:
|
||||
- MVP requirements
|
||||
- Future enhancements
|
||||
- Do not think about timelines whatsoever -- all that matters is scope and detailing exactly what needs to be build in each phase so it can later be cut up into tasks]
|
||||
|
||||
# Logical Dependency Chain
|
||||
[Define the logical order of development:
|
||||
- Which features need to be built first (foundation)
|
||||
- Getting as quickly as possible to something usable/visible front end that works
|
||||
- Properly pacing and scoping each feature so it is atomic but can also be built upon and improved as development approaches]
|
||||
|
||||
# Risks and Mitigations
|
||||
[Identify potential risks and how they'll be addressed:
|
||||
- Technical challenges
|
||||
- Figuring out the MVP that we can build upon
|
||||
- Resource constraints]
|
||||
|
||||
# Appendix
|
||||
[Include any additional information:
|
||||
- Research findings
|
||||
- Technical specifications]
|
||||
</PRD>
|
||||
417
CLAUDE.md
Normal file
417
CLAUDE.md
Normal file
@@ -0,0 +1,417 @@
|
||||
# Task Master AI - Claude Code Integration Guide
|
||||
|
||||
## Essential Commands
|
||||
|
||||
### Core Workflow Commands
|
||||
|
||||
```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)
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
```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
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
```bash
|
||||
# Start each session
|
||||
task-master next # Find next available task
|
||||
task-master show <id> # Review task details
|
||||
|
||||
# During implementation, check in code context into the tasks and subtasks
|
||||
task-master update-subtask --id=<id> --prompt="implementation notes..."
|
||||
|
||||
# Complete tasks
|
||||
task-master set-status --id=<id> --status=done
|
||||
```
|
||||
|
||||
#### 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
|
||||
|
||||
---
|
||||
|
||||
_This guide ensures Claude Code has immediate access to Task Master's essential functionality for agentic development workflows._
|
||||
327
PROJECT_IMPROVEMENT_PLAN.md
Normal file
327
PROJECT_IMPROVEMENT_PLAN.md
Normal file
@@ -0,0 +1,327 @@
|
||||
# 젤리의 적자탈출 프로젝트 개선 계획
|
||||
|
||||
## 목차
|
||||
1. [프로젝트 현황 분석](#프로젝트-현황-분석)
|
||||
2. [주요 개선사항](#주요-개선사항)
|
||||
3. [기술 스택 개선 계획](#기술-스택-개선-계획)
|
||||
4. [인증 시스템 개선](#인증-시스템-개선)
|
||||
5. [CI/CD 도입 계획](#cicd-도입-계획)
|
||||
6. [프로젝트 관리 도구](#프로젝트-관리-도구)
|
||||
7. [실행 로드맵](#실행-로드맵)
|
||||
|
||||
## 프로젝트 현황 분석
|
||||
|
||||
### 프로젝트 개요
|
||||
- **프로젝트명**: 젤리의 적자탈출 (Zellyy Finance)
|
||||
- **목적**: 개인 재무/예산 관리 모바일 앱
|
||||
- **플랫폼**: 웹 + iOS/Android (Capacitor)
|
||||
- **현재 상태**: Supabase → Appwrite 마이그레이션 완료
|
||||
|
||||
### 현재 기술 스택
|
||||
```
|
||||
Frontend: React 18 + TypeScript + Vite
|
||||
UI: Tailwind CSS + shadcn/ui (뉴모픽 디자인)
|
||||
상태관리: Context API
|
||||
백엔드: Appwrite (self-hosted)
|
||||
모바일: Capacitor
|
||||
```
|
||||
|
||||
## 주요 개선사항
|
||||
|
||||
### 🔴 긴급 개선 필요 (보안/안정성)
|
||||
|
||||
#### 1. TypeScript 설정 강화
|
||||
```json
|
||||
// tsconfig.json 수정 필요
|
||||
{
|
||||
"compilerOptions": {
|
||||
"strict": true,
|
||||
"strictNullChecks": true,
|
||||
"noImplicitAny": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. 테스트 코드 추가
|
||||
- 현재 테스트 코드 전무
|
||||
- Vitest + React Testing Library 도입 필요
|
||||
- 핵심 비즈니스 로직부터 단위 테스트 작성
|
||||
|
||||
#### 3. 보안 취약점 해결
|
||||
- API 키 클라이언트 노출 문제
|
||||
- 환경 변수 관리 개선 필요
|
||||
|
||||
### 🟡 중요 개선사항 (성능/품질)
|
||||
|
||||
#### 4. React 성능 최적화
|
||||
- React.memo, useMemo, useCallback 활용 부족
|
||||
- 불필요한 리렌더링 방지 필요
|
||||
- 세션 체크 주기 최적화 (현재 5초 → 30초)
|
||||
|
||||
#### 5. 코드 품질 개선
|
||||
- console.log 81개 제거
|
||||
- 빌드 오류 수정
|
||||
- ESLint 규칙 강화
|
||||
|
||||
#### 6. 번들 크기 최적화
|
||||
- 74개 dependencies 정리
|
||||
- 사용하지 않는 패키지 제거
|
||||
- 코드 스플리팅 적용
|
||||
|
||||
### 🟢 사용성 개선사항
|
||||
|
||||
#### 7. UX 개선
|
||||
- 스켈레톤 UI 활용도 증대
|
||||
- 접근성 개선 (ARIA 라벨, 키보드 네비게이션)
|
||||
- 에러 메시지 사용자 친화적으로 개선
|
||||
|
||||
## 기술 스택 개선 계획
|
||||
|
||||
### 상태 관리: Context API → Zustand
|
||||
|
||||
**현재 (Context API)**
|
||||
```typescript
|
||||
const BudgetContext = createContext();
|
||||
// 복잡한 보일러플레이트 코드
|
||||
```
|
||||
|
||||
**개선 후 (Zustand)**
|
||||
```typescript
|
||||
const useBudgetStore = create<BudgetState>((set) => ({
|
||||
budgets: [],
|
||||
transactions: [],
|
||||
addTransaction: (transaction) => set((state) => ({
|
||||
transactions: [...state.transactions, transaction]
|
||||
}))
|
||||
}));
|
||||
```
|
||||
|
||||
### 데이터 페칭: 수동 → TanStack Query
|
||||
|
||||
**현재**
|
||||
```typescript
|
||||
useEffect(() => {
|
||||
fetchTransactions().then(setTransactions);
|
||||
}, []);
|
||||
```
|
||||
|
||||
**개선 후**
|
||||
```typescript
|
||||
const { data, isLoading, error } = useQuery({
|
||||
queryKey: ['transactions'],
|
||||
queryFn: fetchTransactions,
|
||||
staleTime: 5 * 60 * 1000,
|
||||
});
|
||||
```
|
||||
|
||||
### 차트 라이브러리: Recharts → Chart.js
|
||||
- 번들 크기 감소 (300KB → 100KB)
|
||||
- 모바일 성능 향상
|
||||
|
||||
### 추가 도입 필요 도구
|
||||
```json
|
||||
{
|
||||
"devDependencies": {
|
||||
"prettier": "^3.0.0",
|
||||
"husky": "^8.0.0",
|
||||
"lint-staged": "^13.0.0",
|
||||
"@testing-library/react": "^14.0.0",
|
||||
"vitest": "^1.0.0"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 인증 시스템 개선
|
||||
|
||||
### 현재: Appwrite Auth
|
||||
- 모든 인증 로직 직접 구현
|
||||
- 소셜 로그인 구현 복잡
|
||||
- 고급 기능 구현 어려움
|
||||
|
||||
### 권장: Clerk + Supabase 조합
|
||||
|
||||
#### Clerk (인증 전문)
|
||||
```typescript
|
||||
import { useUser, SignIn } from '@clerk/clerk-react';
|
||||
|
||||
function App() {
|
||||
const { user, isLoaded } = useUser();
|
||||
if (!user) return <SignIn />;
|
||||
return <Dashboard user={user} />;
|
||||
}
|
||||
```
|
||||
|
||||
**장점:**
|
||||
- 카카오/네이버 로그인 즉시 사용 가능
|
||||
- 2FA, 생체인증 내장
|
||||
- 10,000명까지 무료
|
||||
- 뛰어난 UX/UI 컴포넌트
|
||||
|
||||
#### Supabase (데이터베이스)
|
||||
```typescript
|
||||
// Clerk JWT를 Supabase에 전달
|
||||
const supabase = createClient(url, key, {
|
||||
global: {
|
||||
headers: async () => {
|
||||
const token = await getToken({ template: 'supabase' });
|
||||
return { Authorization: `Bearer ${token}` };
|
||||
},
|
||||
},
|
||||
});
|
||||
```
|
||||
|
||||
### 마이그레이션 계획
|
||||
1. Supabase 프로젝트 생성 및 스키마 설정
|
||||
2. Clerk 통합 및 JWT 템플릿 구성
|
||||
3. 데이터 마이그레이션 (Appwrite → Supabase)
|
||||
4. 점진적 기능 전환
|
||||
|
||||
## CI/CD 도입 계획
|
||||
|
||||
### GitHub Actions 워크플로우
|
||||
|
||||
#### 1. 지속적 통합 (CI)
|
||||
```yaml
|
||||
# .github/workflows/ci.yml
|
||||
name: CI
|
||||
|
||||
on:
|
||||
pull_request:
|
||||
branches: [main, develop]
|
||||
push:
|
||||
branches: [main, develop]
|
||||
|
||||
jobs:
|
||||
lint-and-test:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: '18'
|
||||
cache: 'npm'
|
||||
- run: npm ci
|
||||
- run: npm run lint
|
||||
- run: npx tsc --noEmit
|
||||
- run: npm test -- --coverage
|
||||
- run: npm run build
|
||||
```
|
||||
|
||||
#### 2. 자동 배포 (CD)
|
||||
```yaml
|
||||
# .github/workflows/deploy.yml
|
||||
name: Deploy
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [main]
|
||||
|
||||
jobs:
|
||||
deploy-web:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
# Vercel 자동 배포
|
||||
- uses: amondnet/vercel-action@v25
|
||||
with:
|
||||
vercel-token: ${{ secrets.VERCEL_TOKEN }}
|
||||
vercel-args: '--prod'
|
||||
```
|
||||
|
||||
### 브랜치 전략
|
||||
```
|
||||
main → 프로덕션 (자동 배포)
|
||||
develop → 스테이징 (자동 배포)
|
||||
feature/* → 기능 개발 (PR 체크만)
|
||||
```
|
||||
|
||||
### 추가 통합
|
||||
- SonarCloud: 코드 품질 분석
|
||||
- Codecov: 테스트 커버리지 추적
|
||||
- Sentry: 에러 모니터링
|
||||
|
||||
## 프로젝트 관리 도구
|
||||
|
||||
### 권장: Task Master AI + Linear 하이브리드
|
||||
|
||||
#### Task Master AI (이미 설정됨)
|
||||
```bash
|
||||
# AI 기반 태스크 생성
|
||||
task-master parse-prd .taskmaster/docs/prd.txt --research
|
||||
|
||||
# 다음 작업 확인
|
||||
task-master next
|
||||
|
||||
# 상태 업데이트
|
||||
task-master set-status --id=1.2 --status=done
|
||||
```
|
||||
|
||||
#### Linear (선택적 - 시각적 관리)
|
||||
- 개발자 친화적 UI
|
||||
- GitHub 자동 통합
|
||||
- 무료 티어 충분
|
||||
|
||||
### 워크플로우
|
||||
1. Task Master로 PRD 파싱 → 태스크 자동 생성
|
||||
2. Linear로 시각적 관리 (필요시)
|
||||
3. GitHub PR과 자동 연결
|
||||
4. 진행 상황 추적
|
||||
|
||||
## 실행 로드맵
|
||||
|
||||
### Phase 1: 즉시 시작 (1주일)
|
||||
- [ ] TypeScript strict 모드 점진적 활성화
|
||||
- [ ] console.log 제거 및 빌드 오류 수정
|
||||
- [ ] ESLint + Prettier 설정
|
||||
- [ ] GitHub Actions CI 파이프라인 구축
|
||||
- [ ] 환경 변수 보안 강화
|
||||
|
||||
### Phase 2: 핵심 개선 (2-3주)
|
||||
- [ ] Zustand로 상태 관리 마이그레이션
|
||||
- [ ] TanStack Query 도입
|
||||
- [ ] 핵심 비즈니스 로직 테스트 작성
|
||||
- [ ] React 성능 최적화 (메모이제이션)
|
||||
- [ ] Vercel 자동 배포 설정
|
||||
|
||||
### Phase 3: 고급 기능 (1개월)
|
||||
- [ ] Clerk 인증 시스템 도입
|
||||
- [ ] Supabase 데이터베이스 마이그레이션
|
||||
- [ ] Chart.js로 차트 라이브러리 교체
|
||||
- [ ] PWA 기능 추가
|
||||
- [ ] 접근성 개선
|
||||
|
||||
### Phase 4: 최적화 (2개월)
|
||||
- [ ] 번들 크기 최적화
|
||||
- [ ] 모바일 빌드 자동화
|
||||
- [ ] 에러 모니터링 (Sentry) 구축
|
||||
- [ ] 성능 모니터링 도입
|
||||
|
||||
## 예상 효과
|
||||
|
||||
### 개발 효율성
|
||||
- 코드 품질 향상으로 버그 감소
|
||||
- CI/CD로 배포 시간 90% 단축
|
||||
- 타입 안전성으로 런타임 오류 방지
|
||||
|
||||
### 사용자 경험
|
||||
- 성능 개선으로 앱 속도 2배 향상
|
||||
- 카카오/네이버 로그인으로 가입률 증가
|
||||
- 안정성 향상으로 사용자 만족도 개선
|
||||
|
||||
### 유지보수성
|
||||
- 테스트 코드로 리팩토링 안전성 확보
|
||||
- 모니터링으로 문제 조기 발견
|
||||
- 문서화로 향후 개발 용이
|
||||
|
||||
## 참고 자료
|
||||
|
||||
- [Zustand 공식 문서](https://github.com/pmndrs/zustand)
|
||||
- [TanStack Query 공식 문서](https://tanstack.com/query)
|
||||
- [Clerk 공식 문서](https://clerk.com/docs)
|
||||
- [GitHub Actions 가이드](https://docs.github.com/en/actions)
|
||||
- [Task Master AI](https://github.com/cline/task-master-ai)
|
||||
|
||||
---
|
||||
|
||||
*이 문서는 젤리의 적자탈출 프로젝트의 기술적 개선을 위한 종합적인 계획서입니다. 각 단계는 프로젝트 상황에 맞게 조정 가능합니다.*
|
||||
Reference in New Issue
Block a user