풀스택 독서 타이머 - 책 읽은 시간 기록하기

mkdir reading-timer-tracker && cd reading-timer-tracker

이 폴더에서 Laravel 13.x 백엔드 API 프로젝트를 시작합니다.

## 요구사항

1. Laravel 13.x 프로젝트 생성 (폴더명: backend)
2. SQLite 데이터베이스 설정 (.env 파일에서 DB_CONNECTION=sqlite 설정)
3. 다음 두 개의 마이그레이션 파일 생성:
   - `books` 테이블: id, title (책 제목), is_completed (완독 여부, 기본값 false), created_at, updated_at
   - `reading_sessions` 테이블: id, book_id (외래키), duration_minutes (읽은 시간, 정수), read_at (읽은 날짜), created_at, updated_at
4. 마이그레이션 실행
5. Book 모델과 ReadingSession 모델 생성 (관계 설정: Book hasMany ReadingSessions)
6. CORS 설정 (config/cors.php에서 'paths' => ['api/*'], 'allowed_origins' => ['http://localhost:5173'])

백엔드 폴더 구조와 기본 설정이 완료되면 확인 메시지를 출력해주세요.

Laravel API 라우트와 컨트롤러를 구현해주세요.

## 요구사항

### API 엔드포인트 (routes/api.php)

1. **책 관리 API**
   - GET /api/books - 모든 책 목록 조회 (각 책의 총 읽은 시간 포함)
   - POST /api/books - 새 책 등록 (title 필드 필수)
   - PATCH /api/books/{id}/complete - 책 완독 상태 토글
   - DELETE /api/books/{id} - 책 삭제

2. **독서 기록 API**
   - GET /api/books/{bookId}/sessions - 특정 책의 독서 기록 목록 (최신순)
   - POST /api/books/{bookId}/sessions - 새 독서 기록 추가 (duration_minutes, read_at 필드)
   - GET /api/sessions/recent - 전체 최근 독서 기록 (모든 책, 최신 10개)

### 컨트롤러 구현

- BookController: 책 CRUD 및 완독 토글 로직
- ReadingSessionController: 독서 기록 CRUD 로직
- JSON 응답 형식 통일 (성공 시 data 키, 실패 시 error 키)
- GET /api/books 응답에 각 책의 total_duration_minutes (읽은 시간 합계) 포함

모든 API 엔드포인트가 정상 작동하는지 확인해주세요.

React 19 프론트엔드 프로젝트를 생성하고 기본 구조를 설정해주세요.

## 요구사항

1. Vite 기반 React 19 프로젝트 생성 (폴더명: frontend)
2. Tailwind CSS 설치 및 설정
3. 다음 컴포넌트 파일 구조 생성:
   - src/App.jsx (메인 앱)
   - src/components/BookList.jsx (책 목록 표시)
   - src/components/BookForm.jsx (새 책 등록 폼)
   - src/components/Timer.jsx (독서 타이머)
   - src/components/SessionList.jsx (독서 기록 목록)
4. src/api/books.js 파일 생성 (Laravel API 호출 함수들)
   - fetchBooks() - GET /api/books
   - createBook(title) - POST /api/books
   - toggleComplete(bookId) - PATCH /api/books/{id}/complete
   - deleteBook(bookId) - DELETE /api/books/{id}
   - fetchSessions(bookId) - GET /api/books/{bookId}/sessions
   - createSession(bookId, durationMinutes, readAt) - POST /api/books/{bookId}/sessions
5. API 베이스 URL을 환경변수로 설정 (.env 파일에 VITE_API_URL=http://localhost:8000)

기본 구조가 완성되면 확인 메시지를 출력해주세요.

책 목록 표시 및 등록 기능을 구현해주세요.

## 요구사항

### App.jsx
- useState로 books 상태 관리
- useEffect로 컴포넌트 마운트 시 fetchBooks() 호출하여 책 목록 로드
- BookForm과 BookList 컴포넌트 렌더링

### BookForm.jsx
- 책 제목 입력 필드 (input)
- 등록 버튼 클릭 시 createBook() 호출
- 등록 성공 시 부모 컴포넌트에 알림 (콜백 함수)
- 입력 필드 초기화

### BookList.jsx
- props로 받은 books 배열을 map으로 렌더링
- 각 책 카드에 표시:
  - 책 제목
  - 총 읽은 시간 (total_duration_minutes를 "X시간 Y분" 형식으로 변환)
  - 완독 여부 (체크박스 또는 배지)
  - 완독 토글 버튼 (클릭 시 toggleComplete() 호출)
  - 삭제 버튼 (클릭 시 deleteBook() 호출)
  - 타이머 시작 버튼 (클릭 시 해당 책 선택 상태로 변경)
- Tailwind CSS로 카드 스타일링 (그리드 레이아웃)

책 등록 및 목록 표시가 정상 작동하는지 확인해주세요.

독서 타이머 기능을 구현해주세요.

## 요구사항

### Timer.jsx
- props로 selectedBook (현재 선택된 책 객체) 받기
- useState로 다음 상태 관리:
  - isRunning (타이머 실행 중 여부)
  - seconds (경과 시간, 초 단위)
- useEffect로 타이머 로직:
  - isRunning이 true일 때 1초마다 seconds 증가
  - cleanup 함수로 interval 정리
- 시작/정지/리셋 버튼
- 경과 시간을 "MM:SS" 형식으로 표시
- 정지 버튼 클릭 시:
  - 경과 시간을 분 단위로 변환 (Math.ceil(seconds / 60))
  - createSession(selectedBook.id, durationMinutes, new Date()) 호출
  - 타이머 리셋 (seconds = 0, isRunning = false)
  - 부모 컴포넌트에 알림 (콜백 함수)
- selectedBook이 없으면 "책을 선택해주세요" 메시지 표시

### App.jsx 수정
- selectedBook 상태 추가
- BookList에서 타이머 시작 버튼 클릭 시 selectedBook 설정
- Timer 컴포넌트 렌더링 (selectedBook props 전달)
- 타이머 정지 후 콜백에서 books 목록 새로고침

타이머가 정상 작동하고, 기록이 저장되는지 확인해주세요.

독서 기록 목록 표시 기능을 추가하고 최종 마무리해주세요.

## 요구사항

### SessionList.jsx
- props로 bookId 받기 (선택 사항, 없으면 전체 최근 기록 표시)
- useState로 sessions 상태 관리
- useEffect로 컴포넌트 마운트 시:
  - bookId가 있으면 fetchSessions(bookId) 호출
  - bookId가 없으면 fetchRecentSessions() 호출 (전체 최근 기록, API 수정 필요)
- 기록 목록을 테이블 또는 리스트로 렌더링:
  - 날짜 (read_at를 "YYYY-MM-DD HH:mm" 형식으로 표시)
  - 읽은 시간 (duration_minutes를 "X분" 형식으로 표시)
  - 책 제목 (전체 기록 표시 시)
- Tailwind CSS로 스타일링

### App.jsx 수정
- SessionList 컴포넌트 렌더링 (bookId 없이, 전체 최근 기록 표시)
- 레이아웃 조정:
  - 상단: 책 등록 폼
  - 중단: 책 목록 (그리드)
  - 하단 왼쪽: 타이머
  - 하단 오른쪽: 최근 독서 기록

### 최종 점검
- Laravel API 서버 실행 (php artisan serve)
- React 개발 서버 실행 (npm run dev)
- 모든 기능 테스트:
  - 책 등록/삭제/완독 토글
  - 타이머 시작/정지 및 기록 저장
  - 책 목록의 총 읽은 시간 업데이트
  - 최근 독서 기록 표시
- README.md 작성 (프로젝트 설명, 설치 및 실행 방법)

모든 기능이 정상 작동하는지 확인하고 완성 메시지를 출력해주세요.