풀스택 일일 물 섭취량 기록기

# Laravel 12.x API 백엔드 프로젝트 생성 및 기본 설정

Laravel 12.x로 RESTful API 백엔드를 만들어주세요.

## 요구사항

1. **프로젝트 생성**
   - `composer create-project laravel/laravel water-tracker-api`
   - Laravel 12.x 최신 버전 사용

2. **데이터베이스 설정**
   - `.env` 파일에서 SQLite 사용하도록 설정
   - `DB_CONNECTION=sqlite`
   - `database/database.sqlite` 파일 생성

3. **마이그레이션 생성**
   - `water_intakes` 테이블 생성
   - 필드: `id`, `amount` (integer, ml 단위), `recorded_at` (timestamp), `created_at`, `updated_at`

4. **모델 생성**
   - `WaterIntake` 모델 생성
   - `$fillable = ['amount', 'recorded_at']`
   - `$casts`로 `recorded_at`을 datetime으로 캐스팅

5. **CORS 설정**
   - `config/cors.php`에서 localhost:5173 (Vite 기본 포트) 허용
   - 모든 메서드(GET, POST, DELETE) 허용

마이그레이션 실행까지 완료해주세요.

# Laravel API 라우트 및 컨트롤러 구현

물 섭취 기록을 관리하는 RESTful API를 만들어주세요.

## 요구사항

1. **컨트롤러 생성**
   - `WaterIntakeController` API 리소스 컨트롤러 생성

2. **API 라우트 정의** (`routes/api.php`)
   - `GET /api/water-intakes/today` - 오늘의 모든 섭취 기록 조회
   - `POST /api/water-intakes` - 새로운 섭취 기록 추가
   - `DELETE /api/water-intakes/{id}` - 특정 기록 삭제

3. **컨트롤러 메서드 구현**
   - `today()`: 오늘 날짜의 모든 기록을 최신순으로 반환, 총 섭취량(total_amount)도 함께 계산하여 반환
   - `store()`: amount를 받아 현재 시간으로 기록 생성, Validation 적용 (amount는 필수, 양수, 최대 2000ml)
   - `destroy()`: ID로 기록 삭제

4. **응답 형식**
   - 모든 응답은 JSON 형식
   - today: `{ "data": [...], "total_amount": 1500 }`
   - store: `{ "data": {...}, "message": "기록이 추가되었습니다." }`
   - destroy: `{ "message": "기록이 삭제되었습니다." }`

5. **에러 처리**
   - Validation 실패 시 422 상태 코드와 에러 메시지 반환
   - 존재하지 않는 ID 삭제 시 404 반환

Postman이나 curl로 API 테스트까지 해주세요.

# React 19 + Vite 프론트엔드 프로젝트 생성 및 기본 UI 구성

React 19로 물 섭취량 기록 UI를 만들어주세요.

## 요구사항

1. **프로젝트 생성**
   - `npm create vite@latest water-tracker-frontend -- --template react`
   - React 19 최신 버전 사용
   - Tailwind CSS 설치 및 설정

2. **Axios 설치**
   - `npm install axios`
   - `src/api/axios.js` 파일 생성하여 baseURL을 `http://localhost:8000/api`로 설정

3. **메인 App 컴포넌트 구조**
   - `src/App.jsx`에 전체 레이아웃 구성
   - 헤더: "💧 오늘의 물 섭취량 트래커" 제목
   - 목표량 표시: "목표: 2000ml"
   - 현재 총 섭취량 표시: 큰 글씨로 "1250ml / 2000ml" 형태
   - 진행률 바: Tailwind로 스타일링된 프로그레스 바 (0-100%)
   - 빠른 추가 버튼 섹션: 250ml, 500ml, 750ml 버튼

4. **상태 관리**
   - `useState`로 `intakes` (기록 배열), `totalAmount` (총량) 관리
   - 아직 API 연동은 하지 말고, 더미 데이터로 UI만 구현

5. **스타일링**
   - Tailwind CSS로 깔끔한 카드 레이아웃
   - 파란색 계열 색상 테마 (물 이미지)
   - 반응형 디자인 (모바일 우선)

개발 서버를 실행하고 화면을 확인해주세요.

# React와 Laravel API 연동 - 데이터 조회 및 추가 기능 구현

React 앱에서 Laravel API를 호출하여 실제 데이터를 연동해주세요.

## 요구사항

1. **데이터 조회 (useEffect)**
   - 컴포넌트 마운트 시 `GET /api/water-intakes/today` 호출
   - 응답 데이터로 `intakes`와 `totalAmount` state 업데이트
   - 로딩 상태 관리 (로딩 중일 때 "로딩 중..." 표시)

2. **물 섭취 기록 추가**
   - 250ml, 500ml, 750ml 버튼 클릭 시 `POST /api/water-intakes` 호출
   - 요청 body: `{ "amount": 250 }`
   - 성공 시 데이터 다시 조회하여 화면 업데이트
   - 버튼 클릭 시 간단한 로딩 표시 (버튼 비활성화)

3. **진행률 계산**
   - `totalAmount / 2000 * 100`으로 퍼센트 계산
   - 100% 초과 시에도 프로그레스 바는 100%까지만 표시
   - 100% 달성 시 프로그레스 바 색상 변경 (초록색)

4. **기록 목록 표시**
   - `intakes` 배열을 map으로 순회하여 리스트 렌더링
   - 각 항목: 시간 (HH:MM), 양 (XXXml), 삭제 버튼
   - 최신 기록이 위에 오도록 정렬

5. **에러 처리**
   - API 호출 실패 시 alert로 에러 메시지 표시
   - console.error로 에러 로깅

Laravel 서버(`php artisan serve`)를 실행한 상태에서 테스트해주세요.

# 기록 삭제 기능 및 최종 UX 개선

기록 삭제 기능을 추가하고 전체적인 사용자 경험을 개선해주세요.

## 요구사항

1. **삭제 기능 구현**
   - 각 기록 항목에 삭제 버튼(🗑️ 아이콘) 추가
   - 버튼 클릭 시 `DELETE /api/water-intakes/{id}` 호출
   - 삭제 성공 시 데이터 다시 조회하여 화면 업데이트
   - 삭제 전 확인 메시지 ("이 기록을 삭제하시겠습니까?")

2. **목표 달성 축하 메시지**
   - `totalAmount >= 2000`일 때 화면 상단에 축하 메시지 표시
   - "🎉 오늘의 목표를 달성했습니다!" 메시지
   - 초록색 배경의 알림 배너 스타일

3. **빈 상태 처리**
   - 기록이 없을 때: "아직 기록이 없습니다. 물을 마시고 버튼을 눌러보세요!" 메시지
   - 적절한 아이콘과 함께 안내 문구 표시

4. **시간 표시 포맷팅**
   - `recorded_at`을 "오전/오후 HH:MM" 형식으로 표시
   - JavaScript Date 객체 활용

5. **반응형 개선**
   - 모바일에서 버튼 크기 조정 (터치하기 쉽게)
   - 기록 목록 간격 조정
   - 진행률 바 애니메이션 추가 (transition 효과)

6. **코드 정리**
   - API 호출 함수들을 별도 함수로 분리 (`fetchTodayIntakes`, `addIntake`, `deleteIntake`)
   - 주석 추가로 코드 가독성 향상

모든 기능을 테스트하고 README.md 파일에 프로젝트 설명과 실행 방법을 작성해주세요.