yakenator/todos2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
todos2/docs/PLAN.md
jungwoo choi 074b5133bf feat: 풀스택 할일관리 앱 구현 (통합 모달 + 간트차트) 
- Backend: FastAPI + MongoDB + Redis (카테고리, 할일 CRUD, 파일 첨부, 검색, 대시보드)
- Frontend: Next.js 15 + Tailwind + React Query + Zustand
- 통합 TodoModal: 생성/수정 모달 통합, 탭 구조 (기본/태그와 첨부)
- 간트차트: 카테고리별 할일 타임라인 시각화
- TodoCard: 제목/카테고리/우선순위/태그/첨부 한줄 표시
- Docker Compose 배포 (Frontend:3010, Backend:8010, MongoDB:27021, Redis:6391)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-12 15:45:03 +09:00

260 lines
8.8 KiB
Markdown
Raw Permalink Blame History

# todos2 - 전략 기획안 (Strategic Plan)
> 버전: 1.0.0 | 작성일: 2026-02-10 | 상태: 기획 완료
## 1. 프로젝트 개요
**todos2**는 단순 할일 관리를 넘어, 카테고리/태그/우선순위/마감일/검색/대시보드 기능을 갖춘 확장형 할일 관리 애플리케이션이다.
### 1.1 목표
- 할일의 체계적 분류 및 관리 (카테고리, 태그, 우선순위)
- 마감일 기반 일정 관리 및 시각적 알림
- 검색 및 필터링을 통한 빠른 할일 탐색
- 대시보드를 통한 진행 현황 한눈에 파악
- 일괄 작업을 통한 효율적인 다중 할일 처리
### 1.2 대상 사용자
- 개인 할일 관리가 필요한 사용자
- 프로젝트별/카테고리별 작업 분류가 필요한 사용자
---
## 2. 핵심 기능
| # | 기능 | 설명 | 우선순위 |
|---|------|------|---------|
| 1 | 할일 CRUD | 할일 생성, 조회, 수정, 삭제 | Must |
| 2 | 카테고리 관리 | 카테고리 CRUD, 할일별 카테고리 분류 | Must |
| 3 | 태그 시스템 | 할일에 다중 태그 부여, 태그별 필터링 | Must |
| 4 | 우선순위 | 높음/중간/낮음 3단계 우선순위 설정 | Must |
| 5 | 마감일 관리 | 마감일 설정, 임박/초과 알림 표시 | Must |
| 6 | 검색 | 제목/내용/태그 기반 전문 검색 | Should |
| 7 | 대시보드 | 완료율, 카테고리별/우선순위별 통계 차트 | Should |
| 8 | 일괄 작업 | 다중 선택 후 완료/삭제/카테고리 변경 | Should |
---
## 3. 기술 스택
### 3.1 백엔드
| 기술 | 버전 | 용도 |
|------|------|------|
| Python | 3.11 | 런타임 |
| FastAPI | >= 0.104 | REST API 프레임워크 |
| Motor | >= 3.3 | MongoDB 비동기 드라이버 |
| Pydantic v2 | >= 2.5 | 데이터 검증 및 직렬화 |
| Uvicorn | >= 0.24 | ASGI 서버 |
| Redis (aioredis) | >= 2.0 | 캐싱 (대시보드 통계) |
### 3.2 프론트엔드
| 기술 | 버전 | 용도 |
|------|------|------|
| Next.js | 15 (App Router) | React 프레임워크 |
| TypeScript | 5.x | 타입 안정성 |
| Tailwind CSS | 4.x | 유틸리티 기반 스타일링 |
| shadcn/ui | latest | UI 컴포넌트 라이브러리 |
| Recharts | 2.x | 대시보드 차트 |
| Tanstack Query | 5.x | 서버 상태 관리 및 캐싱 |
| Zustand | 5.x | 클라이언트 상태 관리 |
### 3.3 인프라
| 기술 | 용도 |
|------|------|
| MongoDB 7.0 | 메인 데이터베이스 |
| Redis 7 | 캐싱 레이어 |
| Docker Compose | 로컬 개발 환경 |
---
## 4. 프로젝트 구조
```
todos2/
├── docker-compose.yml
├── CLAUDE.md
├── PLAN.md
├── FEATURE_SPEC.md
├── SCREEN_DESIGN.pptx
├── SCREEN_DESIGN.md
│
├── backend/
│ ├── Dockerfile
│ ├── requirements.txt
│ └── app/
│ ├── __init__.py
│ ├── main.py # FastAPI 앱 진입점
│ ├── database.py # MongoDB 연결 설정
│ ├── models/
│ │ ├── __init__.py
│ │ ├── todo.py # Todo 모델
│ │ ├── category.py # Category 모델
│ │ └── tag.py # Tag 모델
│ ├── routers/
│ │ ├── __init__.py
│ │ ├── todos.py # 할일 CRUD API
│ │ ├── categories.py # 카테고리 API
│ │ ├── tags.py # 태그 API
│ │ ├── search.py # 검색 API
│ │ ├── dashboard.py # 대시보드 통계 API
│ │ └── batch.py # 일괄 작업 API
│ └── services/
│ ├── __init__.py
│ ├── todo_service.py
│ ├── category_service.py
│ ├── tag_service.py
│ ├── search_service.py
│ └── dashboard_service.py
│
└── frontend/
├── Dockerfile
├── package.json
├── next.config.ts
├── tailwind.config.ts
├── tsconfig.json
└── src/
├── app/
│ ├── layout.tsx # 루트 레이아웃
│ ├── page.tsx # 대시보드 (메인)
│ ├── todos/
│ │ └── page.tsx # 할일 목록
│ ├── categories/
│ │ └── page.tsx # 카테고리 관리
│ └── search/
│ └── page.tsx # 검색 결과
├── components/
│ ├── layout/
│ │ ├── Header.tsx
│ │ ├── Sidebar.tsx
│ │ └── MainLayout.tsx
│ ├── todos/
│ │ ├── TodoCard.tsx
│ │ ├── TodoForm.tsx
│ │ ├── TodoList.tsx
│ │ ├── TodoFilter.tsx
│ │ └── BatchActions.tsx
│ ├── categories/
│ │ ├── CategoryList.tsx
│ │ └── CategoryForm.tsx
│ ├── tags/
│ │ ├── TagBadge.tsx
│ │ ├── TagSelect.tsx
│ │ └── TagManager.tsx
│ ├── dashboard/
│ │ ├── StatsCards.tsx
│ │ ├── CompletionChart.tsx
│ │ ├── CategoryChart.tsx
│ │ └── PriorityChart.tsx
│ └── search/
│ ├── SearchBar.tsx
│ └── SearchResults.tsx
├── hooks/
│ ├── useTodos.ts
│ ├── useCategories.ts
│ ├── useTags.ts
│ ├── useDashboard.ts
│ └── useSearch.ts
├── lib/
│ ├── api.ts # API 클라이언트
│ └── utils.ts # 유틸리티 함수
├── store/
│ └── uiStore.ts # UI 상태 (사이드바, 필터 등)
└── types/
└── index.ts # TypeScript 타입 정의
```
---
## 5. 데이터 모델
### 5.1 Todo
```json
{
"_id": "ObjectId",
"title": "string (필수, 1~200자)",
"content": "string (선택, 최대 2000자)",
"completed": "boolean (기본: false)",
"priority": "enum: high | medium | low (기본: medium)",
"category_id": "ObjectId | null",
"tags": ["string"],
"due_date": "datetime | null",
"created_at": "datetime",
"updated_at": "datetime"
}
```
### 5.2 Category
```json
{
"_id": "ObjectId",
"name": "string (필수, 1~50자, 고유)",
"color": "string (hex color, 기본: #6B7280)",
"order": "integer (정렬 순서)",
"created_at": "datetime"
}
```
### 5.3 Tag (인라인)
태그는 별도 컬렉션 없이 Todo 문서 내 배열로 관리한다.
태그 목록은 todos 컬렉션에서 distinct 쿼리로 추출한다.
---
## 6. 개발 우선순위 (Phase별)
### Phase 1: 핵심 기반 (MVP)
> 목표: 기본 할일 관리가 가능한 최소 기능 제품
1. 프로젝트 초기 세팅 (백엔드/프론트엔드 스캐폴딩)
2. MongoDB 연결 및 데이터 모델 정의
3. 할일 CRUD API + UI
4. 카테고리 CRUD API + UI
5. 기본 레이아웃 (Header, Sidebar, MainLayout)
### Phase 2: 확장 기능
> 목표: 분류/필터/우선순위로 할일 관리 고도화
6. 태그 시스템 (태그 입력, 표시, 필터링)
7. 우선순위 설정 (높음/중간/낮음)
8. 마감일 설정 및 임박/초과 알림 UI
9. 검색 기능 (제목/내용/태그)
### Phase 3: 분석 및 효율
> 목표: 통계 및 일괄 작업으로 생산성 향상
10. 대시보드 통계 API
11. 대시보드 차트 UI (완료율, 카테고리별, 우선순위별)
12. 일괄 작업 (다중 선택, 일괄 완료/삭제/카테고리 변경)
---
## 7. API 설계 요약
| Method | Endpoint | 설명 |
|--------|----------|------|
| GET | `/api/todos` | 할일 목록 (필터/페이지네이션) |
| POST | `/api/todos` | 할일 생성 |
| GET | `/api/todos/{id}` | 할일 상세 |
| PUT | `/api/todos/{id}` | 할일 수정 |
| DELETE | `/api/todos/{id}` | 할일 삭제 |
| POST | `/api/todos/batch` | 일괄 작업 |
| GET | `/api/categories` | 카테고리 목록 |
| POST | `/api/categories` | 카테고리 생성 |
| PUT | `/api/categories/{id}` | 카테고리 수정 |
| DELETE | `/api/categories/{id}` | 카테고리 삭제 |
| GET | `/api/tags` | 사용 중인 태그 목록 |
| GET | `/api/search` | 검색 |
| GET | `/api/dashboard/stats` | 대시보드 통계 |
---
## 8. 비기능 요구사항
| 항목 | 기준 |
|------|------|
| API 응답 시간 | 95% 요청 200ms 이내 |
| 페이지네이션 | 기본 20건, 최대 100건 |
| 검색 | MongoDB text index 활용 |
| 캐싱 | 대시보드 통계 Redis 캐시 (TTL 60초) |
| CORS | 프론트엔드 도메인 허용 |
| 에러 처리 | 표준 HTTP 상태 코드 + JSON 에러 응답 |
Reference in New Issue View Git Blame Copy Permalink