Laravel 고객 후기 갤러리 - 사진 리뷰 & 별점 모음 - 바이브코딩 레시피
입문 PHP Laravel AI: Claude

Laravel 고객 후기 갤러리 - 사진 리뷰 & 별점 모음

리포지토리명 customer-review-gallery-laravel
조회수 67 0건 제출

문제 설명

무엇을 만드나요?

소규모 비즈니스(카페, 미용실, 레스토랑 등)를 위한 고객 후기 갤러리를 만듭니다. 고객이 직접 사진과 함께 리뷰를 남기고, 별점을 매길 수 있는 간단한 웹 페이지입니다. 관리자 기능 없이 순수하게 고객이 보고 참여하는 페이지에 집중합니다.

핵심 기능

  • 리뷰 목록 조회: 모든 고객 후기를 카드 형태로 보기 (사진, 별점, 작성자, 내용)
  • 리뷰 작성: 이름, 별점(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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1
Step 1
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 기본 페이지가 표시됩니다.

2
Step 2
고객 후기를 저장할 데이터베이스 테이블을 만들어주세요.

요구사항:
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 실행 시 에러 없이 완료됩니다.

3
Step 3
리뷰 목록을 보여주는 메인 페이지와 라우트를 만들어주세요.

요구사항:
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로 깔끔하게 스타일링되어 있습니다.

4
Step 4
리뷰 작성 폼과 저장 기능을 구현해주세요.

요구사항:
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 접속 시 리뷰 작성 폼이 표시됩니다. 폼을 작성하고 제출하면 리뷰가 데이터베이스에 저장되고, 메인 페이지로 돌아가면 방금 작성한 리뷰가 갤러리에 표시됩니다. 사진도 정상적으로 업로드되고 표시됩니다.

5
Step 5
별점 필터링 기능과 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)

로그인 후 제출

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

댓글 (0)

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