📱 Todo Project

메모 → 수신함 → Todo 관리의 간단하고 직관적인 워크플로우

🎯 핵심 워크플로우

📝 메모 작성 → 📥 수신함 확인 → ✅ Todo 변환 → 📋 Todo 관리

3개 페이지로 완성되는 심플한 구조:

1. 📝 새 메모 (/upload.html) - 빠른 메모 작성
2. 📥 수신함 (/inbox.html) - 메모 확인 & Todo 변환
3. 📋 Todo 목록 (/todo-list.html) - 오늘 할 일 관리

✨ 주요 기능

• 🖊️ 빠른 메모 작성: 텍스트 + 이미지 (최대 5장)
• 📅 시작일 기반 Todo: 해야 할 시점이 된 Todo만 표시
• 🏷️ 스마트 상태 관리: 오늘 시작 / 진행 중 자동 구분
• 📱 모바일 최적화: 카메라/갤러리 업로드 지원
• 🔄 지연 관리: +3일, +5일, 날짜 선택 연장
• 🎨 빈티지 UI: 양피지 테마의 아름다운 인터페이스

🚀 빠른 시작

# 프로젝트 클론
git clone https://git.hyungi.net/hyungi/Todo-Project.git
cd Todo-Project

# Docker로 실행
docker-compose up -d

# 접속
open http://localhost:4000

기본 계정: hyungi / admin

🏗️ 기술 스택

Frontend

• HTML5/CSS3/JavaScript: 바닐라 JS로 가벼운 구현
• Tailwind CSS: 빠른 스타일링
• PWA: 홈화면 추가 지원
• Nginx: 정적 파일 서빙 & API 프록시

Backend

• FastAPI: 고성능 Python API
• SQLAlchemy: 비동기 ORM
• PostgreSQL: 안정적인 데이터베이스
• Pydantic: 데이터 검증

Infrastructure

• Docker Compose: 컨테이너 오케스트레이션
• Nginx: 리버스 프록시
• Volume: 데이터 영속성

📊 데이터베이스 구조

📋 todos 테이블

Column       | Type                     | 설명
-------------|--------------------------|------------------
id           | uuid                     | 고유 ID
user_id      | uuid                     | 사용자 ID
title        | varchar(200)             | 제목 (메모는 선택사항)
description  | text                     | 내용 (필수)
category     | enum                     | MEMO | TODO
status       | enum                     | pending | completed
start_date   | timestamp                | Todo 시작일
image_urls   | text                     | 이미지 URLs (JSON)
created_at   | timestamp                | 생성일
updated_at   | timestamp                | 수정일
completed_at | timestamp                | 완료일

🚀 성능 최적화 인덱스

• idx_todos_workflow: 복합 워크플로우 조회 최적화
• idx_todos_start_date: 시작일 기준 조회
• idx_todos_category_status: 카테고리별 상태 조회

🔄 API 엔드포인트

인증

• POST /api/auth/login - 로그인
• GET /api/auth/me - 사용자 정보

Todo/메모 관리

• POST /api/todos - 메모/Todo 생성
• GET /api/todos?category=memo - 메모 목록 (수신함)
• GET /api/todos?category=todo - Todo 목록
• PUT /api/todos/{id} - Todo 수정 (카테고리 변환, 상태 변경)
• POST /api/todos/upload-image - 이미지 업로드

📱 모바일 지원

PWA 기능

• 홈화면 추가 가능
• 오프라인 지원 (예정)
• 푸시 알림 (예정)

모바일 최적화

• 터치 친화적 UI
• 카메라/갤러리 접근
• 키보드 대응 스크롤
• 이미지 자동 압축

🎨 UI/UX 특징

빈티지 양피지 테마

• 따뜻한 세피아 색상
• 손글씨 느낌의 폰트
• 그림자와 테두리 효과
• 직관적인 아이콘

반응형 디자인

• 데스크톱: 넓은 레이아웃
• 모바일: 세로 최적화
• 터치 제스처 지원

🔧 개발 환경 설정

로컬 개발

# 백엔드 개발
cd backend
pip install -e .
uvicorn src.main:app --reload --port 9000

# 프론트엔드 개발  
cd frontend
python -m http.server 8000

환경 변수

# 데이터베이스
DATABASE_URL=postgresql+asyncpg://todo_user:todo_password@localhost:5432/todo_db

# JWT 설정
SECRET_KEY=your-secret-key
ACCESS_TOKEN_EXPIRE_MINUTES=30

# 파일 업로드
UPLOAD_DIR=/data/uploads
MAX_FILE_SIZE=5242880  # 5MB

📈 성능 최적화

데이터베이스

• 복합 인덱스로 쿼리 최적화
• 카테고리별 분리로 효율적 조회
• 이미지 URL JSON 저장으로 정규화 최소화

프론트엔드

• 바닐라 JS로 번들 크기 최소화
• 이미지 클라이언트 압축
• 불필요한 로깅 제거
• Nginx 정적 파일 캐싱

🚀 배포

Docker Compose (권장)

docker-compose up -d

시놀로지 NAS

자세한 설치 가이드: SYNOLOGY_INSTALL.md

📖 추가 문서

• 📚 종합 개발 가이드 - 상세한 개발 가이드
• 🏠 시놀로지 설치 - NAS 설치 방법

🤝 기여하기

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 라이선스

이 프로젝트는 MIT 라이선스 하에 배포됩니다.

📞 문의

프로젝트 링크: https://git.hyungi.net/hyungi/Todo-Project