풀스택 주간 식단 플래너

mkdir weekly-meal-planner-fullstack && cd weekly-meal-planner-fullstack

이 폴더에서 Laravel 13.x 백엔드 API 프로젝트를 생성하세요.

## 요구사항

1. Laravel 13.x 프로젝트를 `backend` 폴더에 생성
2. SQLite 데이터베이스 사용 설정 (.env 파일에서 DB_CONNECTION=sqlite)
3. `meals` 테이블 마이그레이션 생성:
   - id (primary key)
   - day_of_week (string): 'monday', 'tuesday', ..., 'sunday'
   - meal_time (string): 'breakfast', 'lunch', 'dinner'
   - menu_name (string): 메뉴명
   - calories (integer, nullable): 칼로리
   - notes (text, nullable): 메모
   - timestamps
4. Meal 모델 생성
5. MealController 생성 및 RESTful API 라우트 설정:
   - GET /api/meals - 모든 식단 조회
   - POST /api/meals - 식단 추가
   - PUT /api/meals/{id} - 식단 수정
   - DELETE /api/meals/{id} - 식단 삭제
6. CORS 설정: React 프론트엔드(http://localhost:5173)에서 접근 가능하도록 설정
7. 마이그레이션 실행

## 참고

- Laravel 13.x 설치: `composer create-project laravel/laravel backend`
- CORS 패키지는 Laravel 기본 포함, config/cors.php 설정 확인

이제 React 19 프론트엔드 프로젝트를 생성하세요.

## 요구사항

1. `frontend` 폴더에 Vite + React 19 프로젝트 생성
2. Tailwind CSS 설치 및 설정
3. Axios 설치 (npm install axios)
4. 기본 프로젝트 구조:
   ```
   frontend/
   ├── src/
   │   ├── components/
   │   │   ├── MealGrid.jsx (주간 식단 그리드)
   │   │   ├── MealCard.jsx (개별 식단 카드)
   │   │   └── MealForm.jsx (식단 추가/수정 폼)
   │   ├── App.jsx
   │   └── main.jsx
   ```
5. App.jsx에 기본 레이아웃:
   - 헤더: "주간 식단 플래너" 제목
   - 메인: 7일 x 3끼(아침/점심/저녁) 그리드 레이아웃
   - useState로 meals 배열 상태 관리
6. axios로 Laravel API(http://localhost:8000/api/meals) 연결 설정
7. 컴포넌트는 아직 빈 껍데기만 생성 (다음 단계에서 구현)

## 참고

- Vite React 생성: `npm create vite@latest frontend -- --template react`
- Tailwind 설치: https://tailwindcss.com/docs/guides/vite

React 프론트엔드에 식단 조회 및 표시 기능을 구현하세요.

## 요구사항

1. **App.jsx**:
   - useEffect로 컴포넌트 마운트 시 Laravel API에서 모든 식단 데이터 가져오기 (GET /api/meals)
   - meals 상태에 저장
   - 로딩 상태 관리 (isLoading)

2. **MealGrid.jsx**:
   - 7일(월~일) x 3끼(아침/점심/저녁) 그리드 레이아웃 구현
   - Tailwind CSS Grid 사용 (grid-cols-4: 요일 라벨 + 아침/점심/저녁)
   - 각 셀에 MealCard 컴포넌트 렌더링
   - props로 meals 배열 받기

3. **MealCard.jsx**:
   - 특정 요일+시간대의 식단 정보 표시
   - 메뉴명, 칼로리, 메모 표시
   - 식단이 없으면 "+ 식단 추가" 버튼 표시
   - 식단이 있으면 메뉴 정보와 수정/삭제 버튼 표시
   - props: dayOfWeek, mealTime, meal (해당 식단 데이터 또는 null)

4. **스타일링**:
   - 깔끔한 카드 디자인 (border, shadow, padding)
   - 요일별 헤더 스타일
   - 시간대별 구분 (아침: 노란색 테두리, 점심: 주황색, 저녁: 파란색)

## 참고

- 요일 배열: ['monday', 'tuesday', 'wednesday', 'thursday', 'friday', 'saturday', 'sunday']
- 시간대 배열: ['breakfast', 'lunch', 'dinner']
- 한글 표시: { monday: '월요일', breakfast: '아침' } 등 매핑 객체 사용

식단 추가 및 수정 기능을 구현하세요.

## 요구사항

1. **MealForm.jsx** 모달 컴포넌트 생성:
   - 폼 필드: 메뉴명(필수), 칼로리(선택), 메모(선택)
   - 추가 모드 / 수정 모드 지원
   - 취소 및 저장 버튼
   - Tailwind CSS로 모달 스타일링 (배경 오버레이 + 중앙 카드)

2. **MealCard.jsx 수정**:
   - "+ 식단 추가" 버튼 클릭 시 MealForm 모달 열기 (추가 모드)
   - 기존 식단 클릭 또는 수정 버튼 클릭 시 MealForm 모달 열기 (수정 모드)
   - 모달 열림/닫힘 상태 관리

3. **App.jsx에 식단 추가/수정 함수 구현**:
   - `addMeal(mealData)`: POST /api/meals로 새 식단 추가
   - `updateMeal(id, mealData)`: PUT /api/meals/{id}로 식단 수정
   - API 호출 후 성공하면 meals 상태 업데이트 (다시 GET 요청 또는 로컬 상태 업데이트)
   - 에러 처리 (alert 또는 toast 메시지)

4. **Props 전달**:
   - MealForm에 onSave, onCancel, initialData(수정 시), dayOfWeek, mealTime 전달
   - MealCard에 onAdd, onEdit 콜백 전달

## 참고

- 모달 닫기: 배경 클릭 또는 취소 버튼으로 닫기
- 폼 유효성 검사: 메뉴명은 필수, 칼로리는 숫자만 입력 가능

식단 삭제 기능 및 최종 UI 개선을 구현하세요.

## 요구사항

1. **식단 삭제 기능**:
   - MealCard에 삭제 버튼 추가 (휴지통 아이콘 또는 "삭제" 텍스트)
   - 삭제 버튼 클릭 시 확인 대화상자 표시 ("정말 삭제하시겠습니까?")
   - 확인 시 DELETE /api/meals/{id} API 호출
   - 성공 시 meals 상태에서 해당 식단 제거

2. **App.jsx에 deleteMeal 함수 추가**:
   - `deleteMeal(id)`: DELETE 요청 후 상태 업데이트
   - 에러 처리

3. **UI 개선**:
   - 각 요일별 총 칼로리 합계 표시 (요일 헤더에 작은 텍스트로)
   - 빈 식단 셀에 안내 문구 개선 ("클릭하여 식단 추가")
   - 호버 효과 추가 (카드에 마우스 올리면 약간 확대 또는 그림자 진하게)
   - 반응형 디자인 확인 (모바일에서는 1일씩 스크롤 가능하도록)

4. **최종 테스트**:
   - 식단 추가, 수정, 삭제가 모두 정상 작동하는지 확인
   - Laravel 백엔드와 React 프론트엔드 간 데이터 동기화 확인
   - 브라우저 새로고침 후에도 데이터 유지되는지 확인 (DB에 저장됨)

## 보너스 (선택)

- 주간 전환 버튼 (이번 주/다음 주)
- 식단 복사 기능 (특정 요일 식단을 다른 요일로 복사)
- 메뉴 검색 기능

## 참고

- 삭제 확인: `window.confirm()` 사용 또는 커스텀 모달 구현
- 칼로리 합계: meals 배열을 필터링하여 특정 요일의 칼로리 합산