mkdir cafe-stamp-coupon-book && cd cafe-stamp-coupon-book

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

## Laravel 13.x API 백엔드 구성

1. Laravel 13.x 프로젝트를 `backend` 폴더에 생성해주세요.
2. `.env` 파일을 설정하여 SQLite 데이터베이스를 사용하도록 구성해주세요.
3. 다음 테이블 구조로 마이그레이션 파일을 생성해주세요:

**cafes 테이블**:
- id (primary key)
- name (카페 이름, string)
- location (위치, string)
- stamp_goal (스탬프 목표 개수, integer, 기본값 10)
- reward_description (리워드 설명, string, 예: "아메리카노 1잔 무료")
- timestamps

**stamp_books 테이블**:
- id (primary key)
- cafe_id (외래키, cafes 테이블 참조)
- user_name (사용자 이름, string, 간단히 이름만 저장)
- current_stamps (현재 스탬프 개수, integer, 기본값 0)
- timestamps

**stamp_logs 테이블** (보너스 - 스탬프 적립 히스토리):
- id (primary key)
- stamp_book_id (외래키, stamp_books 테이블 참조)
- stamped_at (적립 날짜, timestamp)
- timestamps

**coupons 테이블**:
- id (primary key)
- cafe_id (외래키, cafes 테이블 참조)
- user_name (사용자 이름, string)
- is_used (사용 여부, boolean, 기본값 false)
- expires_at (만료일, date, nullable)
- timestamps

4. 마이그레이션을 실행하여 테이블을 생성해주세요.
5. 샘플 카페 데이터 5개를 Seeder로 생성해주세요 (예: "스타벅스 강남점", "투썸플레이스 홍대점", "커피빈 신촌점" 등).
6. CORS 설정을 추가하여 프론트엔드(localhost:5173)에서 API 호출이 가능하도록 해주세요.

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

`backend/routes/api.php` 파일에 다음 RESTful API 엔드포인트를 정의해주세요:

- `GET /api/cafes` - 모든 카페 목록 조회
- `GET /api/stamp-books?user_name={name}` - 특정 사용자의 스탬프북 목록 조회 (카페 정보 포함)
- `POST /api/stamp-books` - 새로운 스탬프북 생성 (사용자가 카페를 선택하여 내 스탬프북에 추가)
- `POST /api/stamp-books/{id}/stamp` - 스탬프 적립 (current_stamps +1, stamp_logs에 기록 추가, 목표 달성 시 쿠폰 자동 생성)
- `GET /api/coupons?user_name={name}` - 특정 사용자의 쿠폰 목록 조회
- `PATCH /api/coupons/{id}/use` - 쿠폰 사용 처리 (is_used = true)

각 엔드포인트에 대응하는 컨트롤러를 생성하고 로직을 구현해주세요:

- **CafeController**: 카페 목록 조회
- **StampBookController**: 스탬프북 생성, 조회, 스탬프 적립 로직
  - 스탬프 적립 시: current_stamps를 1 증가시키고, stamp_logs 테이블에 기록 추가
  - current_stamps가 stamp_goal에 도달하면: coupons 테이블에 새 쿠폰 생성, current_stamps를 0으로 리셋
- **CouponController**: 쿠폰 조회, 사용 처리

모든 API는 JSON 형식으로 응답하고, 에러 처리를 포함해주세요.

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

1. `frontend` 폴더에 Vite + React 19 프로젝트를 생성해주세요.
2. Tailwind CSS를 설치하고 설정해주세요.
3. 다음 컴포넌트 구조를 생성해주세요:

```
frontend/src/
├── App.jsx (메인 앱 컴포넌트, 라우팅 없이 탭 방식으로 화면 전환)
├── components/
│   ├── CafeList.jsx (카페 목록 표시 및 스탬프북 추가)
│   ├── MyStampBooks.jsx (내 스탬프북 목록 및 스탬프 적립)
│   ├── MyCoupons.jsx (내 쿠폰 목록 및 사용 처리)
│   └── Header.jsx (헤더, 사용자 이름 입력)
```

4. `App.jsx`에서 useState로 현재 활성 탭("cafes", "stampbooks", "coupons")과 사용자 이름(userName)을 관리해주세요.
5. `Header.jsx`에서 사용자 이름 입력 필드와 3개의 탭 버튼을 구현해주세요 (카페 목록, 내 스탬프북, 내 쿠폰).
6. 각 탭 버튼 클릭 시 해당 컴포넌트가 표시되도록 조건부 렌더링을 구현해주세요.
7. Tailwind CSS로 깔끔한 UI를 구성해주세요 (카드 레이아웃, 버튼 스타일 등).

API 호출은 아직 구현하지 말고, 컴포넌트 구조와 UI만 먼저 완성해주세요.

## 카페 목록 조회 및 스탬프북 추가 기능 구현

`CafeList.jsx` 컴포넌트에서 다음 기능을 구현해주세요:

1. 컴포넌트가 마운트되면 `GET http://localhost:8000/api/cafes` API를 호출하여 카페 목록을 가져와 useState로 상태 관리해주세요.
2. 카페 목록을 카드 형태로 표시해주세요 (카페 이름, 위치, 스탬프 목표, 리워드 설명).
3. 각 카페 카드에 "내 스탬프북에 추가" 버튼을 구현해주세요.
4. 버튼 클릭 시 `POST http://localhost:8000/api/stamp-books` API를 호출하여 새로운 스탬프북을 생성해주세요 (body: { cafe_id, user_name }).
5. 스탬프북 추가 성공 시 "스탬프북에 추가되었습니다!" 알림을 표시하고, 버튼을 "추가됨"으로 변경하여 비활성화해주세요.
6. 사용자 이름이 입력되지 않은 경우 경고 메시지를 표시해주세요.

Tailwind CSS로 카페 카드를 그리드 레이아웃으로 배치하고, 호버 효과와 버튼 스타일을 추가해주세요.

## 내 스탬프북 목록 및 스탬프 적립 기능 구현

`MyStampBooks.jsx` 컴포넌트에서 다음 기능을 구현해주세요:

1. 컴포넌트가 마운트되면 `GET http://localhost:8000/api/stamp-books?user_name={userName}` API를 호출하여 내 스탬프북 목록을 가져와 상태 관리해주세요.
2. 스탬프북 목록을 카드 형태로 표시해주세요:
   - 카페 이름 및 위치
   - 현재 스탬프 개수 / 목표 스탬프 개수 (예: "7 / 10")
   - 진행률 프로그레스 바 (Tailwind CSS로 구현, 예: w-[70%] bg-blue-500)
   - "스탬프 적립" 버튼
3. "스탬프 적립" 버튼 클릭 시 `POST http://localhost:8000/api/stamp-books/{id}/stamp` API를 호출하여 스탬프를 적립해주세요.
4. 적립 성공 시 해당 스탬프북의 current_stamps를 +1 업데이트하고, 진행률 바를 애니메이션으로 업데이트해주세요.
5. 스탬프가 목표에 도달하여 쿠폰이 생성된 경우, "축하합니다! 쿠폰이 발급되었습니다." 모달을 표시해주세요 (Tailwind CSS 모달).
6. 사용자 이름이 없거나 스탬프북이 없는 경우 안내 메시지를 표시해주세요.

프로그레스 바는 Tailwind의 transition-all duration-300으로 부드러운 애니메이션 효과를 추가해주세요.

## 내 쿠폰 목록 및 사용 처리 기능 구현

`MyCoupons.jsx` 컴포넌트에서 다음 기능을 구현해주세요:

1. 컴포넌트가 마운트되면 `GET http://localhost:8000/api/coupons?user_name={userName}` API를 호출하여 내 쿠폰 목록을 가져와 상태 관리해주세요.
2. 쿠폰 목록을 카드 형태로 표시해주세요:
   - 카페 이름
   - 리워드 설명
   - 사용 여부 (사용됨 / 사용 가능)
   - 만료일 (있는 경우)
   - "사용하기" 버튼 (사용 가능한 쿠폰만)
3. "사용하기" 버튼 클릭 시 `PATCH http://localhost:8000/api/coupons/{id}/use` API를 호출하여 쿠폰을 사용 처리해주세요.
4. 사용 성공 시 해당 쿠폰 카드를 "사용됨" 상태로 업데이트하고, 회색 처리(opacity-50)하여 시각적으로 구분해주세요.
5. 사용된 쿠폰과 사용 가능한 쿠폰을 분리하여 표시해주세요 (사용 가능한 쿠폰을 상단에 배치).
6. 쿠폰이 없는 경우 "아직 쿠폰이 없습니다. 스탬프를 적립해보세요!" 안내 메시지를 표시해주세요.

Tailwind CSS로 쿠폰 카드를 디자인하고, 사용 가능한 쿠폰은 파란색 테두리, 사용된 쿠폰은 회색 테두리로 구분해주세요.