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
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>
|
||||
Reference in New Issue
Block a user