README.md

🌊 바다 퀘스트 - 해양 테마 할 일 관리 앱

바다 속 모험처럼 할 일을 관리하세요! 깊은 바다로 나아가며 레벨업하는 게임화된 할 일 관리 앱입니다.

✨ 주요 특징

🐠 바다 테마 디자인

• 물결 애니메이션: 실시간으로 움직이는 파도 효과
• 버블 효과: 화면을 올라가는 공기방울
• 해양 생물 아이콘: 난이도별 바다 생물 (새우→고래)
• 심해 그라데이션: 레벨이 오를수록 깊은 바다로

🎮 게임 요소

• 5가지 난이도:

  • 🦐 새우 (쉬움) - 10 XP
  • 🐟 물고기 (보통) - 25 XP
  • 🐢 거북이 (어려움) - 50 XP
  • 🦈 상어 (에픽) - 100 XP
  • 🐋 고래 (전설) - 200 XP

• 해양 깊이 레벨:

  • Lv 1-5: 얕은 바다
  • Lv 6-10: 연안
  • Lv 11-20: 심해
  • Lv 21-30: 해구
  • Lv 30+: 마리아나 해구

🚀 빠른 시작

# Docker Compose로 실행
docker-compose up

# 브라우저에서 접속
http://localhost:5173

🎯 1분 시연 가이드

1. 앱 접속: http://localhost:5173
2. 자동 시연 버튼 클릭 (🚀 버튼)
3. 자동으로 실행되는 기능들:
   • 10개 퀘스트 자동 생성
   • 순차적 완료 애니메이션
   • 레벨업 효과
   • 버블 & 물결 애니메이션

🛠 기술 스택

• 백엔드: FastAPI + PostgreSQL
• 프론트엔드: React + Vite + Framer Motion
• 스타일링: Tailwind CSS
• 컨테이너: Docker & Docker Compose

📸 화면 구성

메인 화면

• 바다 깊이별 캐릭터 표시 (🐟→🐠→🐢→🦈→🐙→🐋)
• 실시간 경험치바 애니메이션
• 물결 배경 효과

퀘스트 카드

• 해양 생물 아이콘이 움직이는 애니메이션
• 난이도별 색상 그라데이션
• 완료 시 사라지는 효과

시연 컨트롤

• 🌊 10개 생성: 다양한 난이도의 퀘스트 생성
• ⚡ 모두 완료: 모든 퀘스트 순차 완료
• 🚀 자동 시연: 전체 프로세스 자동 실행

🌊 주요 애니메이션

1. 물결 효과: 3개 레이어의 파도가 다른 속도로 움직임
2. 버블 상승: 랜덤한 크기의 거품이 위로 떠오름
3. 해양 생물 움직임: 퀘스트 아이콘이 헤엄치는 효과
4. 레벨업 폭죽: 레벨 상승 시 화려한 컨페티

📝 API 엔드포인트

• GET /api/users/demo - 데모 사용자 (바다탐험가)
• GET /api/quests - 퀘스트 목록
• POST /api/quests - 퀘스트 생성
• POST /api/quests/{id}/complete - 퀘스트 완료
• POST /api/quests/demo/generate - 데모 퀘스트 생성

🐳 Docker 명령어

# 실행
docker-compose up

# 백그라운드 실행
docker-compose up -d

# 중지
docker-compose down

# 재시작
docker-compose restart

# 로그 확인
docker-compose logs -f

🎨 디자인 특징

• 간결한 UI: 복잡함을 제거한 깔끔한 카드 디자인
• 한국어 지원: 모든 텍스트 한국어화
• 반응형 디자인: 모바일에서도 완벽 작동
• 다크 테마: 바다 깊이를 표현한 어두운 배경

📄 라이선스

MIT License