todo.md

TODO 애플리케이션 구현 체크리스트

1. 프로젝트 초기 설정

• GitHub 저장소 생성
• 프로젝트 기본 구조 설정
  • frontend/backend 디렉토리 생성
  • 프로젝트 설정 파일 구성
• TypeScript 설정
• ESLint, Prettier 설정
• GitHub Actions CI/CD 파이프라인 설정

2. 프론트엔드 (React)

2.1 초기 설정

• React 프로젝트 생성 (Vite + TypeScript)
• Material-UI 설치 및 테마 설정
• 상태 관리 설정 (React Query)

2.2 목업 데이터 및 서비스 구현

• 목업 데이터 정의
  • TODO 항목 데이터
• 목업 API 서비스 구현
  • TODO CRUD API

2.3 컴포넌트 구현

• 공통 컴포넌트
  • 레이아웃
  • 로딩 인디케이터
  • 에러 메시지
• TODO 관련 컴포넌트
  • TODO 목록 페이지
  • TODO 생성/수정 폼
  • TODO 항목 컴포넌트
  • TODO 수정 다이얼로그
• 상태 관리 및 로직
  • TODO 상태 관리
  • 에러 처리
  • 로딩 상태 관리
  • 검색 및 필터링
  • 정렬

2.4 스타일링 및 UI/UX

• 반응형 디자인 구현
• 다크 모드 지원
• 애니메이션 효과
• 접근성 개선

3. 백엔드 인프라 (CDK)

• CDK 프로젝트 초기화
• DynamoDB 테이블 정의
• Lambda 함수 생성
  • TODO CRUD 함수
• API Gateway 설정
  • REST API 엔드포인트 설정
  • CORS 설정
• 환경 변수 및 시크릿 관리

4. 프론트엔드-백엔드 통합

• 목업 API를 실제 API로 교체
• API 에러 처리 구현
• 환경 변수 설정

5. 테스트

• 프론트엔드 단위 테스트
• 프론트엔드 통합 테스트
• 백엔드 단위 테스트
• E2E 테스트

6. 배포

• 프론트엔드 배포 (GitHub Pages)
• 백엔드 배포 (CDK)
• 도메인 설정 (선택사항)
• SSL 인증서 설정

7. 문서화

• API 문서 작성
• 배포 프로세스 문서화
• 사용자 가이드 작성
• README.md 업데이트
  • 프로젝트 개요
  • 아키텍처 다이어그램
  • 시퀀스 다이어그램
  • 설치 및 실행 방법
  • 기여 가이드

8. 모니터링 및 로깅

• 프론트엔드 에러 트래킹 설정
• CloudWatch 로그 설정
• 알람 설정

진행 중인 작업

CI/CD

• GitHub Actions 워크플로우 설정
  • 프론트엔드 자동 배포 파이프라인 구축
  • GitHub Pages 배포 설정
  • 저장소 public 설정
  • API 엔드포인트 시크릿 설정
  • GitHub Pages 소스 설정 (수동)
  • 첫 배포 확인

GitHub Pages 설정 시도

• API를 통한 직접 설정 시도
• CLI 제한사항 확인
• 대안 설정 방안 수립
• 웹 인터페이스 설정 진행

현재 진행 상태

• ✅ GitHub 저장소 생성 및 초기 설정 완료
• ✅ 프로젝트 문서화 (README.md, 설계 문서, 체크리스트) 완료
• ✅ 기본 디렉토리 구조 생성
• ✅ 프론트엔드 기본 기능 구현 완료
  • TODO 목록 표시
  • TODO 추가/삭제
  • TODO 완료 상태 토글
  • 목업 데이터 연동
• 🏃‍♂️ 백엔드 구현 예정