- 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>
256 lines
18 KiB
JSON
256 lines
18 KiB
JSON
{
|
|
"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"
|
|
}
|
|
}
|
|
} |