☕ 카페 음료 메뉴판 with 계절 한정 메뉴 배지 - 바이브코딩 레시피
입문 PHP Laravel AI: Claude

☕ 카페 음료 메뉴판 with 계절 한정 메뉴 배지

리포지토리명 cafe-menu-seasonal-badge
조회수 68 0건 제출

문제 설명

프로젝트 개요

실제 카페에서 사용할 수 있는 디지털 음료 메뉴판을 만듭니다. 음료 카테고리별로 분류하고, 계절 한정 메뉴에는 눈에 띄는 배지를 표시합니다. 고객이 메뉴를 보기 쉽게 카드 레이아웃으로 구성하고, 각 음료의 가격과 설명을 한눈에 확인할 수 있습니다.

필수 기능

  • 음료 등록 폼: 관리자가 음료 이름, 가격, 설명, 카테고리(커피/음료/디저트), 계절 한정 여부를 입력
  • 카테고리별 필터링: 상단 탭으로 전체/커피/음료/디저트 선택 시 해당 메뉴만 표시
  • 계절 한정 배지: 계절 메뉴에는 '🌸 봄 한정', '🍉 여름 한정' 같은 배지 자동 표시
  • 카드형 레이아웃: Tailwind CSS로 그리드 레이아웃, 음료 이미지 placeholder, 가격 강조
  • 간단한 검색: 음료 이름으로 실시간 검색 필터링

보너스 기능

  • 음료 수정/삭제 기능
  • 인기 메뉴 별표(⭐) 표시 기능
  • 품절 상태 표시 (회색 처리)
  • 다크 모드 토글

기술 스택

  • Laravel 13.x + Blade 템플릿
  • SQLite 데이터베이스
  • Tailwind CSS
  • Alpine.js (간단한 인터랙션용)

학습 목표

  • Laravel 기본 CRUD 작성법 익히기
  • Blade 컴포넌트로 재사용 가능한 UI 만들기
  • 조건부 렌더링과 필터링 로직 구현
  • Tailwind CSS로 반응형 카드 레이아웃 구성

제약 조건

  • • Laravel 13.x 사용 (구버전 금지)
  • • Blade 템플릿만 사용 (React/Vue 금지)
  • • SQLite 데이터베이스 사용
  • • Tailwind CSS로 스타일링
  • • Alpine.js로 간단한 클라이언트 인터랙션 구현
  • • 반응형 디자인 (모바일/태블릿/데스크톱 대응)
  • • 실제 카페에서 사용 가능한 수준의 UI/UX

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
mkdir cafe-menu-seasonal-badge && cd cafe-menu-seasonal-badge

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

다음 작업을 수행해주세요:

1. Laravel 13.x 프로젝트 초기화 (`composer create-project laravel/laravel . "^13.0"`)
2. SQLite 데이터베이스 설정:
   - .env 파일에서 DB_CONNECTION=sqlite 설정
   - database/database.sqlite 파일 생성
3. Tailwind CSS 설치 및 설정:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - tailwind.config.js에 Blade 템플릿 경로 추가
   - resources/css/app.css에 Tailwind 디렉티브 추가
4. Alpine.js CDN 추가 (resources/views/layouts/app.blade.php에)
5. 기본 레이아웃 파일 생성 (app.blade.php):
   - HTML5 구조
   - Tailwind CSS 및 Alpine.js 로드
   - 네비게이션 바 (카페 로고, 메뉴 관리 링크)
   - 메인 컨텐츠 영역
   - 푸터

프로젝트가 정상적으로 실행되는지 확인해주세요 (`php artisan serve`).

기대 결과: Laravel 13.x 프로젝트가 생성되고, Tailwind CSS와 Alpine.js가 설정되며, 기본 레이아웃이 완성됩니다. 브라우저에서 localhost:8000 접속 시 네비게이션 바와 빈 컨텐츠 영역이 표시됩니다.

2
Step 2
음료 메뉴 데이터베이스와 모델을 생성합니다.

다음 작업을 수행해주세요:

1. MenuItem 모델과 마이그레이션 생성:
   - `php artisan make:model MenuItem -m`
2. 마이그레이션 파일에 테이블 컬럼 정의:
   - name (string): 음료 이름
   - description (text, nullable): 음료 설명
   - price (integer): 가격 (원 단위)
   - category (string): 카테고리 (coffee/beverage/dessert)
   - is_seasonal (boolean, default false): 계절 한정 여부
   - seasonal_tag (string, nullable): 계절 태그 ('spring', 'summer', 'fall', 'winter')
   - is_popular (boolean, default false): 인기 메뉴 여부
   - is_sold_out (boolean, default false): 품절 여부
   - timestamps
3. MenuItem 모델에 fillable 속성 설정
4. 마이그레이션 실행: `php artisan migrate`
5. 시더 파일 생성하여 샘플 데이터 추가:
   - 커피 3개 (아메리카노, 카페라떼, 바닐라라떼 등)
   - 음료 3개 (딸기라떼, 레몬에이드, 녹차라떼 등)
   - 디저트 2개 (치즈케이크, 마카롱 등)
   - 계절 한정 메뉴 2개 (봄 한정 벚꽃라떼, 여름 한정 수박주스 등)
6. 시더 실행: `php artisan db:seed`

데이터베이스에 샘플 데이터가 잘 들어갔는지 확인해주세요.

기대 결과: MenuItem 모델과 테이블이 생성되고, 샘플 음료 데이터 8개가 데이터베이스에 저장됩니다. php artisan tinker로 MenuItem::all() 실행 시 데이터를 확인할 수 있습니다.

3
Step 3
메뉴판 메인 페이지와 카테고리 필터링 기능을 구현합니다.

다음 작업을 수행해주세요:

1. MenuController 생성: `php artisan make:controller MenuController`
2. index 메서드 구현:
   - 모든 음료 데이터를 가져오기
   - 카테고리 쿼리 파라미터가 있으면 필터링
   - 검색 쿼리 파라미터가 있으면 이름으로 검색
3. routes/web.php에 라우트 등록:
   - GET / -> MenuController@index
4. resources/views/menu/index.blade.php 생성:
   - 상단에 카테고리 탭 버튼 (전체/커피/음료/디저트)
   - 검색 입력 필드
   - 음료 카드 그리드 레이아웃 (Tailwind grid-cols-1 md:grid-cols-2 lg:grid-cols-3)
   - 각 카드에 음료 정보 표시:
     * 이미지 placeholder (https://via.placeholder.com/300x200)
     * 음료 이름 (큰 글씨)
     * 설명 (작은 회색 글씨)
     * 가격 (강조, 우측 정렬)
     * 계절 한정 배지 (조건부 렌더링)
     * 인기 메뉴 별표 (조건부 렌더링)
     * 품절 시 회색 오버레이
5. Alpine.js로 클라이언트 검색 필터링 추가:
   - x-data로 searchQuery 상태 관리
   - x-show로 검색어에 매칭되는 카드만 표시

Tailwind CSS로 카드 디자인을 예쁘게 꾸며주세요 (그림자, 둥근 모서리, 호버 효과 등).

기대 결과: 메뉴판 메인 페이지가 완성됩니다. 카테고리 탭 클릭 시 해당 메뉴만 표시되고, 검색창에 입력 시 실시간으로 필터링됩니다. 계절 한정 메뉴에는 '🌸 봄 한정' 같은 배지가 표시되고, 인기 메뉴에는 ⭐가 표시됩니다.

4
Step 4
관리자용 음료 등록/수정/삭제 기능을 구현합니다.

다음 작업을 수행해주세요:

1. MenuController에 create, store, edit, update, destroy 메서드 추가
2. routes/web.php에 리소스 라우트 등록:
   - Route::resource('menu', MenuController::class)
3. resources/views/menu/create.blade.php 생성:
   - 음료 등록 폼 (Tailwind CSS로 스타일링)
   - 입력 필드: 이름, 설명, 가격, 카테고리(select), 계절 한정 여부(checkbox), 계절 태그(select), 인기 메뉴(checkbox)
   - 제출 버튼
4. resources/views/menu/edit.blade.php 생성:
   - 수정 폼 (create.blade.php와 유사하지만 기존 데이터 채워짐)
   - 삭제 버튼 추가 (DELETE 메서드)
5. MenuController의 store, update, destroy 메서드에 유효성 검사 추가:
   - name: required, max:100
   - price: required, integer, min:0
   - category: required, in:coffee,beverage,dessert
   - seasonal_tag: nullable, in:spring,summer,fall,winter
6. 메인 페이지 네비게이션 바에 '메뉴 추가' 버튼 추가
7. 각 메뉴 카드에 '수정' 버튼 추가 (관리자용)

폼 디자인을 깔끔하게 만들고, 제출 후 메인 페이지로 리다이렉트되도록 해주세요.

기대 결과: 관리자가 새 음료를 추가하고, 기존 음료를 수정/삭제할 수 있는 페이지가 완성됩니다. 폼에서 데이터를 입력하고 제출하면 데이터베이스에 저장되고 메인 페이지에 새 메뉴가 표시됩니다. 유효성 검사 실패 시 에러 메시지가 표시됩니다.

제출된 작품 (0)

로그인 후 제출

아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.
아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!