Laravel 고객 후기 갤러리 - 사진 리뷰 & 별점 모음
customer-review-gallery-laravel
문제 설명
무엇을 만드나요?
소규모 비즈니스(카페, 미용실, 레스토랑 등)를 위한 고객 후기 갤러리를 만듭니다. 고객이 직접 사진과 함께 리뷰를 남기고, 별점을 매길 수 있는 간단한 웹 페이지입니다. 관리자 기능 없이 순수하게 고객이 보고 참여하는 페이지에 집중합니다.
핵심 기능
- 리뷰 목록 조회: 모든 고객 후기를 카드 형태로 보기 (사진, 별점, 작성자, 내용)
- 리뷰 작성: 이름, 별점(1~5), 사진 업로드, 후기 내용 입력 폼
- 별점 필터링: 5점만, 4점 이상 등 별점별로 필터링
- 반응형 디자인: Tailwind CSS로 모바일에서도 예쁜 갤러리 뷰
- SQLite 데이터베이스: 간단한 DB 설정으로 리뷰 데이터 저장
선택 추가 기능 (보너스)
- 리뷰 좋아요 버튼 (좋아요 수 표시)
- 최신순/별점순 정렬 기능
- 리뷰 검색 (작성자 이름 또는 내용 검색)
- 사진 클릭 시 모달로 크게 보기
왜 이 프로젝트인가요?
실제 비즈니스에서 고객 신뢰를 쌓는 가장 강력한 도구는 진짜 고객 후기입니다. 이 프로젝트를 통해 Laravel의 기본 CRUD, 파일 업로드, Blade 컴포넌트, Tailwind CSS 스타일링을 모두 경험할 수 있습니다. 완성하면 실제 사업에 바로 적용 가능한 페이지가 됩니다!
제약 조건
- • Laravel 13.x + Blade 템플릿 사용 (React/Vue 금지)
- • Tailwind CSS로 스타일링
- • SQLite 데이터베이스 사용 (간단한 설정)
- • 파일 업로드는 Laravel Storage 퍼블릭 디스크 사용
- • 별점은 1~5 정수값으로 저장
- • 리뷰 작성 시 이름, 별점, 내용은 필수, 사진은 선택
- • 반응형 디자인 (모바일 우선)
- • 페이지네이션 적용 (한 페이지에 9개씩)
프롬프트 레시피
아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
mkdir customer-review-gallery-laravel && cd customer-review-gallery-laravel 이 폴더에서 Laravel 13.x 프로젝트를 새로 생성하고, 기본 설정을 완료해주세요. 요구사항: 1. Laravel 13.x 프로젝트 생성 (composer create-project laravel/laravel . 또는 최신 방법 사용) 2. .env 파일에서 데이터베이스를 SQLite로 설정 (DB_CONNECTION=sqlite, DB_DATABASE는 database/database.sqlite 경로) 3. database/database.sqlite 파일 생성 4. Tailwind CSS 설치 및 설정 (npm install, Vite 설정 포함) 5. php artisan serve로 서버 실행 테스트 모든 명령어와 설정 파일 내용을 단계별로 안내해주세요.
기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스 파일이 준비되며, Tailwind CSS가 설치되어 로컬 서버가 정상 작동합니다. http://localhost:8000 접속 시 Laravel 기본 페이지가 표시됩니다.
고객 후기를 저장할 데이터베이스 테이블을 만들어주세요. 요구사항: 1. 'reviews' 테이블을 위한 마이그레이션 파일 생성 2. 테이블 구조: - id (primary key) - customer_name (string, 작성자 이름, 필수) - rating (integer, 1~5 별점, 필수) - content (text, 후기 내용, 필수) - photo_path (string, nullable, 사진 경로) - likes (integer, default 0, 좋아요 수) - timestamps (created_at, updated_at) 3. Review 모델 생성 (app/Models/Review.php) 4. 모델에 fillable 속성 설정 (mass assignment 보호) 5. php artisan migrate 실행 마이그레이션 파일과 모델 코드를 전체 제공해주세요.
기대 결과: reviews 테이블이 SQLite 데이터베이스에 생성되고, Review 모델이 준비됩니다. php artisan migrate 실행 시 에러 없이 완료됩니다.
리뷰 목록을 보여주는 메인 페이지와 라우트를 만들어주세요. 요구사항: 1. routes/web.php에 '/' 경로를 ReviewController의 index 메서드로 라우팅 2. ReviewController 생성 (php artisan make:controller ReviewController) 3. index 메서드 구현: - 모든 리뷰를 최신순으로 조회 (페이지네이션 9개씩) - reviews/index.blade.php 뷰로 전달 4. resources/views/reviews/index.blade.php 생성: - Tailwind CSS로 스타일링된 갤러리 레이아웃 - 3열 그리드 (모바일 1열, 태블릿 2열, 데스크탑 3열) - 각 리뷰 카드에 사진(있으면), 별점(⭐ 아이콘), 작성자 이름, 후기 내용 표시 - 페이지네이션 링크 포함 5. 아직 리뷰가 없으면 "아직 후기가 없습니다" 메시지 표시 전체 코드를 제공해주세요 (컨트롤러, 라우트, 뷰 파일).
기대 결과: http://localhost:8000 접속 시 리뷰 갤러리 페이지가 표시됩니다. 아직 데이터가 없으므로 "아직 후기가 없습니다" 메시지가 보입니다. 페이지 디자인은 Tailwind CSS로 깔끔하게 스타일링되어 있습니다.
리뷰 작성 폼과 저장 기능을 구현해주세요.
요구사항:
1. routes/web.php에 두 개의 라우트 추가:
- GET /reviews/create → ReviewController@create (작성 폼 표시)
- POST /reviews → ReviewController@store (리뷰 저장)
2. ReviewController에 create 메서드 추가:
- resources/views/reviews/create.blade.php 뷰 반환
3. resources/views/reviews/create.blade.php 생성:
- Tailwind CSS 스타일의 폼
- 입력 필드: 이름(text), 별점(radio 1~5, 별 아이콘으로 표시), 내용(textarea), 사진(file, 선택)
- 제출 버튼
- 유효성 검사 에러 메시지 표시 영역
4. ReviewController에 store 메서드 추가:
- 요청 데이터 유효성 검사 (이름, 별점, 내용 필수, 사진 선택, 이미지 타입만 허용)
- 사진 업로드 시 Storage::disk('public')->put('reviews', $file) 사용
- Review 모델로 데이터 저장
- 저장 후 메인 페이지로 리다이렉트 (성공 메시지 포함)
5. storage/app/public 심볼릭 링크 생성 (php artisan storage:link)
전체 코드를 제공해주세요.
기대 결과: http://localhost:8000/reviews/create 접속 시 리뷰 작성 폼이 표시됩니다. 폼을 작성하고 제출하면 리뷰가 데이터베이스에 저장되고, 메인 페이지로 돌아가면 방금 작성한 리뷰가 갤러리에 표시됩니다. 사진도 정상적으로 업로드되고 표시됩니다.
별점 필터링 기능과 UI 개선을 추가해주세요. 요구사항: 1. index 메서드에 별점 필터링 로직 추가: - 쿼리 파라미터 'rating'을 받아서 해당 별점 이상의 리뷰만 조회 - 예: ?rating=4 → 4점 이상 리뷰만 표시 2. resources/views/reviews/index.blade.php 상단에 필터 버튼 추가: - "전체", "⭐⭐⭐⭐⭐ 5점", "⭐⭐⭐⭐ 4점 이상", "⭐⭐⭐ 3점 이상" 버튼 - Tailwind CSS로 스타일링 (현재 선택된 필터 강조) - 각 버튼은 해당 rating 파라미터로 페이지 이동 3. 리뷰 카드 디자인 개선: - 별점을 노란색 별 아이콘으로 시각화 (예: ⭐⭐⭐⭐⭐) - 사진이 있으면 카드 상단에 크게 표시, 없으면 기본 배경색 - 작성자 이름과 작성일 표시 - hover 효과 추가 (카드 그림자 강조) 4. 메인 페이지 상단에 "후기 작성하기" 버튼 추가 (/reviews/create로 이동) 전체 수정된 코드를 제공해주세요.
기대 결과: 메인 페이지에서 별점 필터 버튼을 클릭하면 해당 별점 이상의 리뷰만 표시됩니다. 리뷰 카드 디자인이 더욱 세련되고, 사진이 있는 리뷰는 시각적으로 돋보입니다. "후기 작성하기" 버튼을 통해 쉽게 폼으로 이동할 수 있습니다.
제출된 작품 (0)
로그인 후 제출아직 제출된 작품이 없습니다. 첫 번째 도전자가 되어보세요!