🎯 집중력 타이머 & 일일 목표 트래커 - 포모도로 기법 with 성취 리워드

mkdir focus-timer-daily-goal-tracker && cd focus-timer-daily-goal-tracker

이 폴더에서 프로젝트를 시작합니다.

# 1단계: 프로젝트 구조 및 데이터베이스 초기화

일반 PHP 8.3+ 기반 포모도로 타이머 & 일일 목표 트래커를 만듭니다. 프레임워크를 사용하지 않고 순수 PHP로 구현하며, SQLite로 데이터를 저장합니다.

## 파일 구조

```
focus-timer-daily-goal-tracker/
├── index.php              # 메인 페이지 (타이머 + 태스크 목록)
├── tasks.php              # 태스크 CRUD API 엔드포인트
├── sessions.php           # 세션 기록 API 엔드포인트
├── stats.php              # 통계 페이지
├── badges.php             # 배지 갤러리 페이지
├── db.php                 # 데이터베이스 연결 및 초기화
├── config.php             # 설정 파일 (DB 경로, CSRF 토큰 등)
├── style.css              # 스타일시트
├── app.js                 # 타이머 & AJAX 로직
└── data/
    └── pomodoro.db        # SQLite 데이터베이스 파일
```

## 요구사항

1. `config.php`: 데이터베이스 경로, 세션 설정, CSRF 토큰 생성 함수 포함
2. `db.php`: SQLite 연결 및 테이블 생성 (tasks, sessions, badges)
   - `tasks`: id, title, estimated_pomodoros, completed, created_at
   - `sessions`: id, task_id, completed_at, duration_minutes
   - `badges`: id, badge_type, earned_at (선택)
3. `index.php`: 타이머 UI + 오늘의 태스크 목록 표시. PHP 세션 시작.
4. `tasks.php`: RESTful 스타일 API (GET: 목록, POST: 생성, PUT: 수정, DELETE: 삭제)
5. `sessions.php`: 세션 기록 저장 API (POST)
6. 모든 입력은 prepared statement로 처리
7. 출력은 htmlspecialchars()로 이스케이프

각 파일에 주석으로 역할을 명시하고, 데이터베이스 테이블이 없으면 자동 생성되도록 구현하세요.

# 2단계: 태스크 CRUD 구현 및 목록 표시

`tasks.php`에서 태스크 생성/조회/수정/삭제 API를 완성하고, `index.php`에서 AJAX로 태스크 목록을 불러와 표시합니다.

## 요구사항

1. **tasks.php**:
   - `GET /tasks.php`: 오늘 생성된 태스크 목록 JSON 반환 (completed 상태 포함)
   - `POST /tasks.php`: 새 태스크 생성 (title, estimated_pomodoros 받기)
   - `PUT /tasks.php?id={id}`: 태스크 수정 (title, estimated_pomodoros, completed 업데이트)
   - `DELETE /tasks.php?id={id}`: 태스크 삭제
   - CSRF 토큰 검증 (POST/PUT/DELETE 요청 시)
   - JSON 응답: `{"success": true, "data": ...}` 또는 `{"success": false, "error": "..."}`

2. **index.php**:
   - 태스크 추가 폼 (제목, 예상 포모도로 개수 입력)
   - 태스크 목록을 `<ul>` 또는 `<div>` 리스트로 표시
   - 각 태스크에 완료 체크박스, 수정/삭제 버튼 추가
   - 페이지 로드 시 `app.js`에서 `fetch('/tasks.php')`로 목록 불러오기

3. **app.js**:
   - `loadTasks()`: GET 요청으로 태스크 목록 가져와 DOM에 렌더링
   - `addTask(title, estimatedPomodoros)`: POST 요청으로 태스크 생성
   - `updateTask(id, data)`: PUT 요청으로 태스크 수정
   - `deleteTask(id)`: DELETE 요청으로 태스크 삭제
   - CSRF 토큰을 헤더 또는 바디에 포함

4. **style.css**:
   - 태스크 목록 스타일링 (체크박스, 버튼 정렬)
   - 완료된 태스크는 텍스트 취소선 또는 회색 처리

모든 API 응답은 JSON 형식이며, 에러 시 적절한 HTTP 상태 코드(400, 500 등)를 반환하세요.

# 3단계: 포모도로 타이머 구현

`index.php`에 타이머 UI를 추가하고, `app.js`에서 25분 집중 모드와 5분 휴식 모드를 자동 전환하는 타이머 로직을 구현합니다.

## 요구사항

1. **index.php 타이머 UI**:
   - 큰 숫자로 남은 시간 표시 (`<div id="timer">25:00</div>`)
   - 시작/일시정지/리셋 버튼
   - 현재 모드 표시 ("집중 모드" 또는 "휴식 모드")
   - 진행 바 또는 원형 프로그레스 바 (선택)
   - 태스크 선택 드롭다운 (타이머를 어떤 태스크에 연결할지 선택)

2. **app.js 타이머 로직**:
   - `startTimer()`: 타이머 시작 (setInterval 1초마다 카운트다운)
   - `pauseTimer()`: 타이머 일시정지 (clearInterval)
   - `resetTimer()`: 타이머 초기화 (25:00으로 리셋)
   - 25분 완료 시:
     - 브라우저 알림 또는 오디오 재생 ("집중 세션 완료!")
     - 자동으로 5분 휴식 모드로 전환
   - 5분 완료 시:
     - 알림 ("휴식 끝! 다시 집중하세요")
     - 자동으로 25분 집중 모드로 전환
   - 타이머 종료 시 선택된 태스크와 함께 세션 기록 저장 (POST `/sessions.php`)

3. **sessions.php**:
   - `POST /sessions.php`: 세션 기록 저장 (task_id, completed_at, duration_minutes)
   - JSON 응답: `{"success": true, "session_id": ...}`

4. **style.css**:
   - 타이머 숫자를 화면 중앙에 크게 표시 (font-size: 4rem 이상)
   - 집중 모드는 파란색, 휴식 모드는 초록색 배경 (선택)
   - 버튼 스타일링 (시작: 초록색, 일시정지: 노란색, 리셋: 빨간색)

브라우저 알림을 사용하려면 `Notification.requestPermission()`으로 권한 요청 후 `new Notification(...)`으로 알림을 표시하세요.

# 4단계: 통계 페이지 구현

`stats.php` 페이지를 만들어 오늘/이번 주/이번 달 완료한 포모도로 세션 통계를 표시합니다.

## 요구사항

1. **stats.php**:
   - 페이지 상단에 "통계" 제목
   - 오늘 완료한 세션 수 표시
   - 이번 주 완료한 세션 수 표시
   - 이번 달 완료한 세션 수 표시
   - 태스크별 누적 세션 시간 표시 (테이블 형식)
   - 주간 세션 추이 차트 (선택, 간단한 막대 그래프)

2. **데이터 조회**:
   - `sessions` 테이블에서 `completed_at` 기준으로 오늘/이번 주/이번 달 필터링
   - `GROUP BY task_id`로 태스크별 합계 계산
   - PHP에서 SQL 쿼리 실행 후 결과를 HTML 테이블로 렌더링

3. **차트 (선택)**:
   - 최근 7일간 일별 세션 수를 막대 그래프로 표시
   - Chart.js 또는 순수 CSS로 간단한 막대 그래프 구현

4. **네비게이션**:
   - `index.php`에 "통계 보기" 링크 추가
   - `stats.php`에 "타이머로 돌아가기" 링크 추가

5. **style.css**:
   - 통계 숫자를 강조 (큰 폰트, 컬러 박스)
   - 테이블 스타일링 (헤더, 행 구분)

모든 날짜 계산은 PHP `strtotime()` 또는 `DateTime` 클래스를 사용하세요.

# 5단계: 배지 시스템 구현

세션 수와 연속 달성 일수에 따라 배지를 자동으로 부여하고, `badges.php` 페이지에서 획득한 배지를 표시합니다.

## 요구사항

1. **배지 종류**:
   - 세션 수 배지: "5세션 달성", "10세션 달성", "20세션 달성", "50세션 달성"
   - 연속 달성 배지: "3일 연속", "7일 연속", "30일 연속"
   - 특별 배지: "첫 세션 완료", "새벽 올빼미 (새벽 2~5시 세션)"

2. **배지 부여 로직**:
   - `sessions.php`에서 세션 저장 후, 총 세션 수를 확인하여 배지 조건 충족 시 `badges` 테이블에 삽입
   - 연속 달성 일수는 `sessions` 테이블에서 최근 날짜 연속성을 체크
   - 이미 획득한 배지는 중복 부여하지 않음 (UNIQUE 제약 또는 SELECT 후 체크)

3. **badges.php**:
   - 획득한 배지 목록을 카드 형식으로 표시 (배지 아이콘 + 이름 + 획득 날짜)
   - 아직 획득하지 못한 배지는 회색 또는 잠금 아이콘으로 표시 (선택)
   - 배지별 설명 툴팁 (hover 시 표시)

4. **index.php**:
   - 상단에 "획득한 배지 수" 표시 (`count(badges)` 쿼리)
   - "배지 갤러리" 링크 추가

5. **style.css**:
   - 배지 카드 스타일링 (아이콘, 그림자, 호버 효과)
   - 획득한 배지는 컬러풀하게, 미획득 배지는 회색 처리

배지 아이콘은 이모지(🏆, 🎯, 🔥 등) 또는 Font Awesome 아이콘을 사용하세요.

# 6단계: UI/UX 개선 및 반응형 디자인

사용자 경험을 향상시키기 위해 UI를 다듬고, 모바일에서도 사용 가능하도록 반응형 디자인을 적용합니다.

## 요구사항

1. **다크 모드 토글**:
   - `index.php` 상단에 다크 모드 토글 버튼 추가
   - JavaScript로 `<body>`에 `dark-mode` 클래스 추가/제거
   - CSS 변수로 색상 정의 (`:root`와 `.dark-mode`)
   - 다크 모드 상태를 localStorage에 저장하여 새로고침 후에도 유지

2. **반응형 디자인**:
   - 모바일(< 768px)에서 타이머와 태스크 목록이 세로로 배치
   - 태블릿/데스크탑에서는 타이머 왼쪽, 태스크 목록 오른쪽 배치
   - 버튼 크기를 터치하기 편하게 조정 (최소 44x44px)

3. **애니메이션 & 인터랙션**:
   - 태스크 추가/삭제 시 fade-in/fade-out 애니메이션
   - 타이머 숫자 변경 시 부드러운 전환 효과
   - 완료 체크박스 클릭 시 체크 애니메이션
   - 버튼 호버 시 색상 변화 또는 확대 효과

4. **진행 바 개선**:
   - 타이머 아래에 원형 또는 선형 프로그레스 바 추가
   - CSS `stroke-dashoffset` 또는 `width` 애니메이션으로 진행률 표시

5. **접근성 개선**:
   - 버튼에 `aria-label` 추가
   - 폼 입력 필드에 `<label>` 연결
   - 키보드로 모든 기능 접근 가능하도록 `tabindex` 설정

6. **에러 메시지 & 로딩 상태**:
   - AJAX 요청 실패 시 사용자에게 에러 메시지 표시
   - 로딩 중일 때 스피너 또는 "로딩 중..." 메시지 표시

모든 애니메이션은 CSS transition 또는 @keyframes로 구현하세요.