🍰 베이커리 신메뉴 출시 이벤트 페이지 - 한정 수량 사전예약 폼

mkdir bakery-menu-preorder-event && cd bakery-menu-preorder-event

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

# 1단계: Laravel 프로젝트 초기 설정

다음 요구사항을 만족하는 Laravel 13.x 프로젝트를 생성하세요:

1. **프로젝트 생성**:
   - `composer create-project laravel/laravel . "^13.0"`로 최신 Laravel 13 설치
   - `.env` 파일에서 DB_CONNECTION을 sqlite로 변경
   - `database/database.sqlite` 파일 생성

2. **Tailwind CSS 설정**:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에 Blade 파일 경로 추가
   - `resources/css/app.css`에 Tailwind 디렉티브 추가
   - `resources/views/layouts/app.blade.php` 레이아웃 파일 생성 (Tailwind CDN 또는 Vite 연동)

3. **기본 라우트 설정**:
   - `routes/web.php`에 홈페이지 라우트 추가 (`/`)
   - 간단한 웰컴 메시지를 보여주는 뷰 생성

4. **Vite 빌드 도구 설정**:
   - `vite.config.js`에서 Laravel 플러그인 확인
   - `npm install && npm run dev` 실행 준비

완료 후 `php artisan serve`로 서버 실행 시 "Welcome to Bakery Preorder Event" 메시지가 보여야 합니다.

# 2단계: 데이터베이스 마이그레이션 & 모델 생성

베이커리 제품과 예약 정보를 저장할 테이블을 생성하세요.

## 요구사항:

### 1. Products 테이블 (제품 정보)

`php artisan make:model Product -m` 명령으로 모델과 마이그레이션 생성 후:

- **컬럼 구성**:
  - `id` (primary key)
  - `name` (string, 제품명)
  - `description` (text, 제품 설명)
  - `price` (decimal, 가격)
  - `category` (string, 카테고리: 케이크/빵/쿠키 등)
  - `image_url` (string, 제품 이미지 URL)
  - `total_stock` (integer, 전체 수량)
  - `remaining_stock` (integer, 남은 수량)
  - `release_date` (date, 출시 예정일)
  - `timestamps`

### 2. Reservations 테이블 (예약 정보)

`php artisan make:model Reservation -m` 명령으로 모델과 마이그레이션 생성 후:

- **컬럼 구성**:
  - `id` (primary key)
  - `product_id` (foreign key, products 테이블 참조)
  - `customer_name` (string, 고객 이름)
  - `customer_phone` (string, 연락처)
  - `quantity` (integer, 예약 수량)
  - `pickup_time` (string, 픽업 희망 시간대: 오전/오후/저녁)
  - `reservation_number` (string, 예약 번호, unique)
  - `status` (string, 상태: pending/ready/completed, 기본값 pending)
  - `timestamps`

### 3. 모델 관계 설정

- `Product` 모델에 `hasMany` 관계 추가 (예약 목록)
- `Reservation` 모델에 `belongsTo` 관계 추가 (제품 정보)

### 4. 마이그레이션 실행

- `php artisan migrate` 실행하여 테이블 생성 확인

완료 후 `php artisan migrate:status`로 마이그레이션 상태 확인.

# 3단계: 시딩 데이터 생성 & 메인 페이지 UI 구현

샘플 제품 데이터를 생성하고, 신메뉴를 보여주는 메인 페이지를 만드세요.

## 요구사항:

### 1. 시더 생성

`php artisan make:seeder ProductSeeder` 명령 후:

- **샘플 제품 3개 이상** 생성:
  - 제품명 예시: "딸기 생크림 케이크", "초코 크루아상", "마카롱 세트"
  - 카테고리: 케이크, 빵, 쿠키 등 다양하게
  - 이미지는 Unsplash 또는 Placeholder 이미지 사용 (예: `https://images.unsplash.com/photo-1578985545062-69928b1d9587?w=400`)
  - total_stock과 remaining_stock은 동일하게 설정 (예: 20개)
  - release_date는 오늘 또는 내일 날짜

- `DatabaseSeeder.php`에서 `ProductSeeder` 호출
- `php artisan db:seed` 실행

### 2. 메인 페이지 컨트롤러 & 라우트

- `php artisan make:controller ProductController` 생성
- `index()` 메서드에서 모든 제품 조회 후 뷰로 전달
- `routes/web.php`에 `Route::get('/', [ProductController::class, 'index'])->name('home');` 추가

### 3. 메인 페이지 Blade 뷰 (`resources/views/products/index.blade.php`)

**UI 구성**:

- **헤더 섹션**:
  - 타이틀: "🍰 신메뉴 출시 이벤트 - 사전예약 받습니다!"
  - 서브타이틀: "한정 수량으로 준비했어요. 서둘러 예약하세요!"

- **제품 카드 그리드** (Tailwind Grid 사용):
  - 각 제품마다 카드 형태로 표시
  - 제품 이미지 (rounded, shadow)
  - 제품명, 카테고리 뱃지, 가격
  - 설명 (2줄 말줄임)
  - 출시일 표시
  - **재고 진행바**: `remaining_stock / total_stock` 비율을 Tailwind progress bar로 시각화
  - "예약하기" 버튼 (재고 없으면 비활성화)

- **반응형 디자인**:
  - 모바일: 1열
  - 태블릿: 2열
  - 데스크톱: 3열

### 4. Tailwind 스타일링

- 카드: `bg-white rounded-lg shadow-md hover:shadow-xl transition`
- 버튼: `bg-pink-500 hover:bg-pink-600 text-white px-4 py-2 rounded`
- 진행바: `<div class="w-full bg-gray-200 rounded-full h-2.5"><div class="bg-pink-500 h-2.5 rounded-full" style="width: {{ ($product->remaining_stock / $product->total_stock) * 100 }}%"></div></div>`

완료 후 메인 페이지에서 제품 목록과 재고 진행바가 정상적으로 보여야 합니다.

# 4단계: 예약 폼 페이지 & 예약 처리 로직 구현

고객이 제품을 선택하고 예약 정보를 입력할 수 있는 폼을 만드세요.

## 요구사항:

### 1. 예약 폼 페이지 라우트 & 컨트롤러

- `ProductController`에 `show($id)` 메서드 추가:
  - 특정 제품 정보 조회
  - 재고가 0이면 "품절" 메시지와 함께 예약 불가 안내
  - `resources/views/products/show.blade.php` 뷰로 전달

- `routes/web.php`에 라우트 추가:
  - `Route::get('/products/{id}', [ProductController::class, 'show'])->name('products.show');`

### 2. 예약 폼 Blade 뷰 (`resources/views/products/show.blade.php`)

**UI 구성**:

- **제품 상세 정보**:
  - 큰 이미지, 제품명, 가격, 설명
  - 카테고리 뱃지, 출시일
  - 남은 수량 표시 (예: "🔥 남은 수량: 15개")

- **예약 폼** (`<form method="POST" action="{{ route('reservations.store') }}"`):
  - CSRF 토큰 포함
  - Hidden input: `product_id`
  - 입력 필드:
    - 이름 (required, min:2)
    - 연락처 (required, 형식: 010-XXXX-XXXX)
    - 예약 수량 (required, min:1, max:remaining_stock)
    - 픽업 시간대 (select: 오전 10-12시 / 오후 2-5시 / 저녁 6-8시)
  - 제출 버튼: "예약 완료"

- **재고 없을 때**:
  - 폼 대신 "😢 품절되었습니다. 다음 기회에 만나요!" 메시지 표시

### 3. 예약 처리 컨트롤러

- `php artisan make:controller ReservationController` 생성
- `store(Request $request)` 메서드 구현:
  - **유효성 검사**:
    - 이름, 연락처, 수량, 픽업 시간대 필수
    - 수량은 1 이상, 남은 재고 이하
  - **재고 확인**:
    - 제품의 `remaining_stock`이 요청 수량보다 크거나 같은지 확인
    - 부족하면 에러 메시지와 함께 리다이렉트
  - **예약 번호 생성**:
    - 형식: `BK-` + 현재 날짜(Ymd) + 랜덤 4자리 (예: `BK-20250101-A3F2`)
  - **예약 저장**:
    - Reservation 모델에 데이터 저장
    - 제품의 `remaining_stock` 차감 (수량만큼)
  - **성공 메시지**:
    - 세션에 예약 번호 저장
    - 완료 페이지로 리다이렉트

- `routes/web.php`에 라우트 추가:
  - `Route::post('/reservations', [ReservationController::class, 'store'])->name('reservations.store');`

### 4. 에러 메시지 표시

- Blade 뷰에서 `@error` 디렉티브로 유효성 검사 에러 표시
- 재고 부족 시 alert 또는 toast 메시지

완료 후 제품 상세 페이지에서 예약 폼을 작성하고 제출하면 예약이 저장되고 재고가 차감되어야 합니다.

# 5단계: 예약 완료 페이지 & 예약 목록 관리 페이지

예약 성공 후 안내 메시지를 보여주고, 관리자가 예약 내역을 확인할 수 있는 페이지를 만드세요.

## 요구사항:

### 1. 예약 완료 페이지

- `ReservationController`에 `success()` 메서드 추가:
  - 세션에서 예약 번호를 가져와 해당 예약 정보 조회
  - `resources/views/reservations/success.blade.php` 뷰로 전달

- **UI 구성**:
  - 🎉 "예약이 완료되었습니다!" 타이틀
  - 예약 번호 크게 표시 (복사 가능하게)
  - 예약 정보 요약:
    - 제품명
    - 예약 수량
    - 픽업 시간대
    - 고객 이름, 연락처
  - 안내 메시지:
    - "예약 번호를 꼭 기억해주세요!"
    - "픽업 시 예약 번호를 알려주시면 빠르게 수령하실 수 있습니다."
  - 버튼: "메인으로 돌아가기"

- `routes/web.php`에 라우트 추가:
  - `Route::get('/reservations/success', [ReservationController::class, 'success'])->name('reservations.success');`

### 2. 예약 목록 관리 페이지 (간단한 관리자 뷰)

- `ReservationController`에 `index()` 메서드 추가:
  - 모든 예약 내역을 최신순으로 조회 (with eager loading으로 제품 정보 포함)
  - `resources/views/reservations/index.blade.php` 뷰로 전달

- **UI 구성** (테이블 형태):
  - 헤더: "📋 전체 예약 내역 관리"
  - 테이블 컬럼:
    - 예약 번호
    - 제품명
    - 고객 이름
    - 연락처
    - 수량
    - 픽업 시간대
    - 상태 (뱃지: pending=대기중/ready=준비완료/completed=픽업완료)
    - 예약일시
  - 상태 변경 버튼 (선택사항):
    - "준비 완료로 변경" / "픽업 완료로 변경" 버튼

- `routes/web.php`에 라우트 추가:
  - `Route::get('/admin/reservations', [ReservationController::class, 'index'])->name('reservations.index');`

### 3. 상태 변경 기능 (보너스)

- `ReservationController`에 `updateStatus($id, $status)` 메서드 추가:
  - 예약 상태를 업데이트
  - 성공 메시지와 함께 목록 페이지로 리다이렉트

- `routes/web.php`에 라우트 추가:
  - `Route::patch('/reservations/{id}/status', [ReservationController::class, 'updateStatus'])->name('reservations.updateStatus');`

### 4. 네비게이션 추가

- 레이아웃 파일(`layouts/app.blade.php`)에 네비게이션 메뉴 추가:
  - 홈 (제품 목록)
  - 예약 관리 (관리자용)

완료 후:
- 예약 완료 페이지에서 예약 정보가 정상적으로 표시되어야 합니다.
- 관리 페이지에서 모든 예약 내역을 확인하고, 상태를 변경할 수 있어야 합니다.