동네 맛집 웨이팅 현황판 - 실시간 대기 인원 확인
restaurant-waiting-board
문제 설명
프로젝트 개요
동네 맛집의 웨이팅(대기) 현황을 실시간으로 확인할 수 있는 웹 서비스를 만듭니다. 식당 주인은 대기 팀을 등록하고, 고객은 현재 대기 인원과 예상 대기 시간을 확인할 수 있습니다.
필수 기능
- 식당별 웨이팅 목록 페이지 (공개)
- 현재 대기 중인 팀 목록 표시 (팀명, 인원수, 등록 시간)
- 예상 대기 시간 자동 계산 (1팀당 평균 30분 가정)
- 웨이팅 등록 폼 (팀명, 인원수 입력)
- 웨이팅 호출 완료 버튼 (다음 팀으로 순서 이동)
- 대기 순번 표시 (1번, 2번, 3번...)
- SQLite 데이터베이스 사용
- Blade 템플릿 + Tailwind CSS로 깔끔한 UI
보너스 기능
- 식당별 평균 대기 시간 설정 기능
- 대기 취소 버튼
- 대기 팀 수에 따른 색상 변화 (여유/보통/혼잡)
- 모바일 반응형 디자인
- 페이지 자동 새로고침 (30초마다)
학습 목표
- Laravel 13.x 기본 라우팅 및 컨트롤러 사용법
- Blade 템플릿 문법 (반복문, 조건문, 컴포넌트)
- SQLite 마이그레이션 및 모델 생성
- CRUD 기본 구현 (Create, Read, Delete)
- Tailwind CSS를 활용한 UI 구성
- 시간 계산 로직 구현 (Carbon 라이브러리)
제약 조건
- • Laravel 13.x 사용 (최신 버전)
- • Blade 템플릿 엔진 사용 (React/Vue 사용 금지)
- • SQLite 데이터베이스 사용
- • Tailwind CSS로 스타일링
- • 단일 식당 기준으로 구현 (다중 식당 기능은 보너스)
- • 실시간 WebSocket 사용 금지 (HTTP 새로고침 방식)
- • 인증 기능 없음 (누구나 등록/호출 가능한 간단한 버전)
프롬프트 레시피
아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
mkdir restaurant-waiting-board && cd restaurant-waiting-board 이 폴더에서 Laravel 13.x 프로젝트를 시작합니다. 다음 작업을 수행해주세요: 1. Laravel 13.x 프로젝트 생성 (composer create-project laravel/laravel . "^13.0") 2. .env 파일에서 DB_CONNECTION을 sqlite로 변경하고, database/database.sqlite 파일 생성 3. Tailwind CSS 설치 및 설정: - npm install -D tailwindcss postcss autoprefixer - npx tailwindcss init -p - tailwind.config.js에서 content 경로 설정: ['./resources/**/*.blade.php', './resources/**/*.js'] - resources/css/app.css에 Tailwind 디렉티브 추가 4. vite.config.js 확인 및 설정 5. npm install && npm run dev 실행하여 프론트엔드 빌드 프로젝트 구조가 정상적으로 생성되었는지 확인하고, Laravel 웰컴 페이지가 표시되는지 테스트해주세요.
기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스 파일이 준비되며, Tailwind CSS가 설치됩니다. npm run dev 실행 시 Vite 서버가 정상 작동하고, php artisan serve로 Laravel 개발 서버를 실행하면 웰컴 페이지가 표시됩니다.
웨이팅 데이터를 저장할 데이터베이스 마이그레이션과 모델을 생성해주세요. 요구사항: 1. Waiting 모델 생성 (php artisan make:model Waiting -m) 2. 마이그레이션 파일에 다음 컬럼 추가: - team_name (string): 대기 팀 이름 - party_size (integer): 인원 수 - status (string, default: 'waiting'): 상태 (waiting, called, cancelled) - registered_at (timestamp): 등록 시간 - called_at (timestamp, nullable): 호출 시간 3. Waiting 모델에 $fillable 속성 설정 4. 마이그레이션 실행 (php artisan migrate) 모델과 데이터베이스 테이블이 정상적으로 생성되었는지 확인해주세요.
기대 결과: database/migrations 폴더에 create_waitings_table 마이그레이션 파일이 생성되고, app/Models/Waiting.php 모델 파일이 생성됩니다. php artisan migrate 실행 시 waitings 테이블이 database.sqlite에 정상적으로 생성됩니다.
웨이팅 현황을 보여주는 메인 페이지와 등록 기능을 구현해주세요.
요구사항:
1. WaitingController 생성 (php artisan make:controller WaitingController)
2. 라우트 설정 (routes/web.php):
- GET / → index 메서드 (웨이팅 목록 표시)
- POST /waiting → store 메서드 (웨이팅 등록)
- POST /waiting/{id}/call → call 메서드 (호출 완료 처리)
3. WaitingController의 index 메서드:
- status가 'waiting'인 데이터를 registered_at 순서로 조회
- 각 웨이팅 항목에 순번(position) 계산
- 예상 대기 시간 계산 (앞 팀 수 × 30분)
- resources/views/waiting/index.blade.php로 데이터 전달
4. resources/views/waiting/index.blade.php 생성:
- Tailwind CSS로 깔끔한 카드 UI 구성
- 현재 대기 팀 목록 표시 (팀명, 인원, 순번, 예상 대기 시간)
- 웨이팅 등록 폼 (팀명 입력, 인원 선택 1~10명)
- 각 대기 팀마다 '호출 완료' 버튼 추가
- 대기 팀이 없을 경우 '현재 대기 중인 팀이 없습니다' 메시지
5. store 메서드: 폼 데이터를 받아 Waiting 모델에 저장 후 리다이렉트
6. call 메서드: 해당 웨이팅의 status를 'called'로 변경하고 called_at 기록
페이지가 정상적으로 표시되고, 웨이팅 등록 및 호출 기능이 작동하는지 테스트해주세요.
기대 결과: 웨이팅 현황판 메인 페이지가 생성됩니다. 대기 중인 팀 목록이 카드 형태로 표시되며, 각 팀의 순번과 예상 대기 시간이 계산되어 보입니다. 웨이팅 등록 폼에서 팀명과 인원을 입력하면 새로운 대기 팀이 추가되고, '호출 완료' 버튼을 누르면 해당 팀이 목록에서 사라집니다. Tailwind CSS로 모바일 친화적인 반응형 디자인이 적용됩니다.
제출된 작품 (0)
로그인 후 제출아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!