☕ 카페 음료 메뉴판 with 계절 한정 메뉴 배지
cafe-menu-seasonal-badge
문제 설명
프로젝트 개요
실제 카페에서 사용할 수 있는 디지털 음료 메뉴판을 만듭니다. 음료 카테고리별로 분류하고, 계절 한정 메뉴에는 눈에 띄는 배지를 표시합니다. 고객이 메뉴를 보기 쉽게 카드 레이아웃으로 구성하고, 각 음료의 가격과 설명을 한눈에 확인할 수 있습니다.
필수 기능
- 음료 등록 폼: 관리자가 음료 이름, 가격, 설명, 카테고리(커피/음료/디저트), 계절 한정 여부를 입력
- 카테고리별 필터링: 상단 탭으로 전체/커피/음료/디저트 선택 시 해당 메뉴만 표시
- 계절 한정 배지: 계절 메뉴에는 '🌸 봄 한정', '🍉 여름 한정' 같은 배지 자동 표시
- 카드형 레이아웃: 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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 접속 시 네비게이션 바와 빈 컨텐츠 영역이 표시됩니다.
음료 메뉴 데이터베이스와 모델을 생성합니다.
다음 작업을 수행해주세요:
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() 실행 시 데이터를 확인할 수 있습니다.
메뉴판 메인 페이지와 카테고리 필터링 기능을 구현합니다.
다음 작업을 수행해주세요:
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로 카드 디자인을 예쁘게 꾸며주세요 (그림자, 둥근 모서리, 호버 효과 등).
기대 결과: 메뉴판 메인 페이지가 완성됩니다. 카테고리 탭 클릭 시 해당 메뉴만 표시되고, 검색창에 입력 시 실시간으로 필터링됩니다. 계절 한정 메뉴에는 '🌸 봄 한정' 같은 배지가 표시되고, 인기 메뉴에는 ⭐가 표시됩니다.
관리자용 음료 등록/수정/삭제 기능을 구현합니다.
다음 작업을 수행해주세요:
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)
로그인 후 제출아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!