🍰 베이커리 신상품 사전예약 플랫폼 - 한정수량 예약 & 픽업 시간 선택

mkdir bakery-preorder-pickup-platform && cd bakery-preorder-pickup-platform

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

Laravel 13.x 프로젝트를 생성하고 기본 설정을 완료해주세요.

1. Laravel 13.x 설치:
   composer create-project laravel/laravel . "13.*"

2. .env 파일 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE=/absolute/path/to/database.sqlite (절대 경로로)
   - APP_NAME="베이커리 사전예약"

3. database/database.sqlite 파일 생성:
   touch database/database.sqlite

4. Tailwind CSS 설치:
   npm install -D tailwindcss postcss autoprefixer
   npx tailwindcss init -p

5. tailwind.config.js 설정:
   content: [
     "./resources/**/*.blade.php",
     "./resources/**/*.js",
   ]

6. resources/css/app.css에 Tailwind 디렉티브 추가:
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

7. Alpine.js CDN을 resources/views/layouts/app.blade.php에 추가:
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

8. npm run dev 실행 후 Laravel 서버 시작:
   php artisan serve

모든 설정이 완료되면 http://localhost:8000 접속 시 Laravel 기본 화면이 나와야 합니다.

데이터베이스 마이그레이션과 모델을 생성합니다.

1. Product 모델과 마이그레이션 생성:
   php artisan make:model Product -m

2. database/migrations/xxxx_create_products_table.php 수정:
   - name (string): 상품명
   - description (text): 상세 설명
   - price (decimal, 8, 2): 가격
   - stock (integer): 재고 수량
   - image_url (string, nullable): 상품 이미지 URL
   - pickup_start_time (time): 픽업 시작 시간
   - pickup_end_time (time): 픽업 종료 시간
   - timestamps

3. Reservation 모델과 마이그레이션 생성:
   php artisan make:model Reservation -m

4. database/migrations/xxxx_create_reservations_table.php 수정:
   - product_id (foreignId): 상품 ID (products 테이블 참조)
   - customer_name (string): 고객 이름
   - customer_phone (string): 연락처
   - quantity (integer): 예약 수량
   - pickup_time (datetime): 픽업 시간
   - reservation_number (string, unique): 예약 번호 (자동 생성)
   - status (enum: pending, completed, cancelled): 예약 상태
   - timestamps

5. 마이그레이션 실행:
   php artisan migrate

6. app/Models/Product.php에 관계 설정:
   - reservations() hasMany 관계
   - $fillable 설정

7. app/Models/Reservation.php에 관계 설정:
   - product() belongsTo 관계
   - $fillable 설정
   - 예약 번호 자동 생성 로직 (boot 메서드에서 creating 이벤트 활용)

모델 관계가 명확히 설정되어야 합니다.

더미 데이터(시더)를 생성하고 메인 레이아웃을 구성합니다.

1. ProductSeeder 생성:
   php artisan make:seeder ProductSeeder

2. database/seeders/ProductSeeder.php 작성:
   - 5~7개의 베이커리 상품 생성 (예: 크루아상, 바게트, 초코 머핀, 치즈 케이크, 마카롱 등)
   - 각 상품에 이름, 설명, 가격(3000~15000원), 재고(5~20개), 픽업 시간(09:00~18:00) 설정
   - 이미지는 Unsplash API나 placeholder 이미지 사용 (https://via.placeholder.com/400x300)

3. database/seeders/DatabaseSeeder.php에서 ProductSeeder 호출

4. 시더 실행:
   php artisan db:seed

5. resources/views/layouts/app.blade.php 생성:
   - HTML5 기본 구조
   - Tailwind CSS 링크 (@vite(['resources/css/app.css', 'resources/js/app.js']))
   - Alpine.js CDN
   - 헤더: 로고, 네비게이션 (홈, 상품 목록, 예약 조회)
   - 푸터: 카피라이트, SNS 링크
   - @yield('content') 영역

레이아웃이 깔끔하고 모바일에서도 잘 보여야 합니다.

상품 목록 페이지와 상세 페이지를 구현합니다.

1. ProductController 생성:
   php artisan make:controller ProductController

2. app/Http/Controllers/ProductController.php 작성:
   - index() 메서드: 모든 상품 조회 (재고 있는 것 우선 정렬)
   - show($id) 메서드: 특정 상품 상세 조회

3. routes/web.php 설정:
   - GET / → ProductController@index (상품 목록)
   - GET /products/{id} → ProductController@show (상품 상세)

4. resources/views/products/index.blade.php 생성:
   - @extends('layouts.app')
   - 상품 카드 그리드 레이아웃 (Tailwind grid)
   - 각 카드: 이미지, 상품명, 가격, 남은 재고 표시
   - 재고 0인 경우 "품절" 배지 표시
   - 상품 클릭 시 상세 페이지로 이동

5. resources/views/products/show.blade.php 생성:
   - 상품 이미지 (크게)
   - 상품명, 가격, 상세 설명
   - 재고 상태 표시 ("남은 수량: X개" 또는 "품절")
   - 픽업 가능 시간 안내
   - "예약하기" 버튼 (재고 있을 때만 활성화)
   - 뒤로가기 버튼

Tailwind로 깔끔한 카드 디자인과 반응형 레이아웃을 구현하세요.

예약 폼과 예약 처리 로직을 구현합니다.

1. ReservationController 생성:
   php artisan make:controller ReservationController

2. app/Http/Controllers/ReservationController.php 작성:
   - create($product_id) 메서드: 예약 폼 표시
   - store(Request $request) 메서드:
     - 폼 유효성 검사 (이름, 연락처, 수량, 픽업 시간)
     - 재고 확인 (요청 수량 ≤ 현재 재고)
     - 재고 차감 및 예약 생성
     - 예약 번호 자동 생성
     - 예약 확인 페이지로 리다이렉트
   - show($reservation_number) 메서드: 예약 상세 조회

3. routes/web.php 추가:
   - GET /reservations/create/{product_id} → ReservationController@create
   - POST /reservations → ReservationController@store
   - GET /reservations/{reservation_number} → ReservationController@show

4. resources/views/reservations/create.blade.php 생성:
   - 상품 정보 요약 (이름, 가격)
   - 예약 폼:
     - 이름 (required)
     - 연락처 (required, 010-1234-5678 형식)
     - 수량 (required, min 1, max 재고 수량)
     - 픽업 시간 (required, datetime-local input, 픽업 가능 시간 범위 내)
   - 총 금액 계산 (수량 × 가격, Alpine.js로 실시간 계산)
   - 제출 버튼
   - 에러 메시지 표시 영역 (@error 블레이드 디렉티브)

5. resources/views/reservations/show.blade.php 생성:
   - 예약 완료 메시지
   - 예약 번호 (크게 강조)
   - 상품명, 수량, 총 금액
   - 픽업 시간, 고객 정보
   - 주의사항 (예: 픽업 시간 엄수, 예약 번호 지참)
   - 홈으로 돌아가기 버튼

폼 유효성 검사와 에러 처리가 명확해야 합니다.

예약 조회 기능과 최종 UI 개선을 완료합니다.

1. resources/views/reservations/search.blade.php 생성:
   - 예약 번호 입력 폼
   - 조회 버튼
   - Alpine.js로 간단한 로딩 상태 표시

2. ReservationController에 search() 메서드 추가:
   - GET /reservations/search → 검색 폼 표시
   - POST /reservations/search → 예약 번호로 조회 후 show 페이지로 리다이렉트
   - 예약이 없으면 에러 메시지

3. routes/web.php 추가:
   - GET /reservations/search
   - POST /reservations/search

4. 네비게이션에 "예약 조회" 링크 추가 (layouts/app.blade.php)

5. UI 개선:
   - 재고 부족 시 "품절" 배지를 빨간색으로 강조
   - 예약 가능한 상품은 "예약 가능" 초록색 배지
   - 픽업 시간 선택 시 시간대별 안내 문구 (예: "오전 픽업은 09:00~12:00")
   - Alpine.js로 총 금액 자동 계산 (수량 변경 시)
   - 반응형 디자인 점검 (모바일, 태블릿, 데스크톱)

6. 테스트:
   - 상품 목록 → 상세 페이지 → 예약 → 예약 확인 전체 플로우 확인
   - 재고 0인 상품 예약 시도 → 에러 처리 확인
   - 예약 조회 기능 정상 작동 확인

모든 기능이 정상 작동하고 UI가 직관적이어야 합니다.