## 프로젝트 개요

반려견 보호자들을 위한 커뮤니티 웹 애플리케이션입니다. 개인 애견일지를 기록하고 선택적으로 공개할 수 있으며, 커뮤니티에서 양육 노하우를 공유하고 댓글로 소통할 수 있습니다. 관리자의 공지사항은 웹 푸시로 회원에게 전달됩니다.

## 필수 기능

- 회원가입/로그인 (이메일 기반 인증)
- 애견일지 작성 (비공개 기본, 선택적 공개)
- 애견일지 공개용 갤러리 (공개된 일지만 노출)
- 커뮤니티 게시판 (카테고리별 글 작성, 댓글)
- 관리자 카테고리 관리 (추가/수정/삭제)
- 공지사항 작성 및 웹 푸시 알림 발송
- 반응형 디자인 (모바일 앱 전환 대비)

## 보너스 기능

- 애견 프로필 등록 (이름, 견종, 나이, 사진)
- 애견일지 사진 다중 업로드
- 게시글/댓글 좋아요 기능
- 인기 게시글 랭킹
- 다크 모드 지원

## 기술 스택

- Laravel 13.x (백엔드)
- Blade + Alpine.js (프론트엔드)
- Tailwind CSS (스타일링)
- SQLite (데이터베이스)
- Laravel Web Push (laravel-notification-channels/webpush)

## 제약 조건

- Laravel 13.x + Blade 템플릿 엔진 기반 MPA 구조
- Laravel Breeze Blade starter kit으로 프로젝트 생성
- SQLite 데이터베이스 사용 (간편한 로컬 개발)
- Tailwind CSS로 모든 스타일링 처리
- Alpine.js로 클라이언트 측 인터랙션 처리 (모달, 토글 등)
- Laravel Eloquent ORM과 마이그레이션 활용
- 이미지 업로드는 Laravel Storage (public 디스크) 사용
- 폼 검증은 Laravel Form Request Validation 사용
- 웹 푸시는 laravel-notification-channels/webpush 패키지 사용
- 향후 모바일 앱 전환을 고려하여 컨트롤러 로직과 뷰를 분리하고, 필요 시 API 라우트 추가 가능하도록 설계

---

## 프롬프트 레시피 - Step별 가이드

---

### Step 1: Laravel 13.x + Breeze Blade 프로젝트 생성

**프롬프트:**

mkdir dog-community && cd dog-community

이 폴더에서 Laravel 13.x + Blade 프로젝트를 시작합니다.

다음 명령으로 Laravel Breeze Blade starter kit 프로젝트를 생성하세요:

composer create-project laravel/laravel . composer require laravel/breeze --dev php artisan breeze:install blade php artisan migrate npm install npm run build

프로젝트 구조를 확인하고, .env 파일에서 DB_CONNECTION=sqlite로 설정한 후 database/database.sqlite 파일을 생성하세요.

Alpine.js는 Breeze Blade에 기본 포함되어 있으므로 별도 설치가 필요 없습니다.

기본 인증 기능(로그인/회원가입)이 포함된 Breeze 스타터 킷이 설치되었는지 확인하고, npm run dev로 프론트엔드 빌드가 정상 작동하는지 테스트하세요.

APP_NAME을 "멍멍커뮤니티"로 설정하세요.

**기대 결과:** "Laravel 13.x + Breeze Blade 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, 기본 인증 페이지(로그인/회원가입)가 작동합니다."

---

### Step 2: 핵심 모델 및 마이그레이션 생성

**프롬프트:**

다음 모델들을 생성하고 마이그레이션을 작성하세요.

■ Pet (애견 프로필) 모델:

• id (primary key)
• user_id (foreign key, users 테이블 참조)
• name (string, 애견 이름)
• breed (string, nullable, 견종)
• birth_date (date, nullable, 생년월일)
• photo (string, nullable, 프로필 사진 경로)
• timestamps

■ Diary (애견일지) 모델:

• id (primary key)
• user_id (foreign key, users 테이블 참조)
• pet_id (foreign key, nullable, pets 테이블 참조)
• title (string, 제목)
• content (text, 내용)
• is_public (boolean, default: false, 공개 여부)
• published_at (timestamp, nullable, 공개 시점)
• timestamps

■ DiaryImage (애견일지 이미지) 모델:

• id (primary key)
• diary_id (foreign key, diaries 테이블 참조)
• image_path (string, 이미지 경로)
• sort_order (integer, default: 0)
• timestamps

■ Category (커뮤니티 카테고리) 모델:

• id (primary key)
• name (string, 카테고리명)
• slug (string, unique, URL용 슬러그)
• sort_order (integer, default: 0)
• is_active (boolean, default: true)
• timestamps

■ Post (커뮤니티 게시글) 모델:

• id (primary key)
• user_id (foreign key, users 테이블 참조)
• category_id (foreign key, categories 테이블 참조)
• title (string, 제목)
• content (text, 내용)
• view_count (integer, default: 0)
• timestamps

■ Comment (댓글) 모델:

• id (primary key)
• user_id (foreign key, users 테이블 참조)
• post_id (foreign key, posts 테이블 참조)
• content (text, 댓글 내용)
• timestamps

■ Notice (공지사항) 모델:

• id (primary key)
• user_id (foreign key, users 테이블 참조, 작성 관리자)
• title (string, 제목)
• content (text, 내용)
• is_pushed (boolean, default: false, 푸시 발송 여부)
• timestamps

모델 간 관계 설정:

• User hasMany Pet, Diary, Post, Comment
• Pet belongsTo User, hasMany Diary
• Diary belongsTo User, belongsTo Pet, hasMany DiaryImage
• DiaryImage belongsTo Diary
• Category hasMany Post
• Post belongsTo User, belongsTo Category, hasMany Comment
• Comment belongsTo User, belongsTo Post

users 테이블에 is_admin (boolean, default: false) 컬럼을 추가하는 마이그레이션도 작성하세요.

마이그레이션을 실행하고, 테스트용 시더를 작성하세요:

• 일반 유저 3명, 관리자 1명
• 각 유저에 애견 1~2마리
• 애견일지 각 5개 (일부는 공개)
• 카테고리 4개 (건강/영양, 훈련/교육, 용품 후기, 자유게시판)
• 게시글 카테고리별 3개씩, 댓글 각 2개
• 공지사항 2개

php artisan make:model Pet -m php artisan make:model Diary -m php artisan make:model DiaryImage -m php artisan make:model Category -m php artisan make:model Post -m php artisan make:model Comment -m php artisan make:model Notice -m php artisan migrate:fresh --seed

**기대 결과:** "모든 테이블이 생성되고, 테스트 데이터(유저 4명, 애견, 일지, 카테고리 4개, 게시글, 댓글, 공지사항)가 시딩됩니다."

---

### Step 3: 애견 프로필 및 애견일지 기능

**프롬프트:**

애견 프로필 관리와 애견일지 CRUD 기능을 구현하세요.

■ Laravel 컨트롤러 (PetController):

• index(): 로그인 유저의 애견 목록 조회
• store(): 애견 등록 (이름, 견종, 생년월일, 사진 업로드)
• update(): 애견 정보 수정
• destroy(): 애견 삭제

■ Laravel 컨트롤러 (DiaryController):

• index(): 로그인 유저의 비공개 애견일지 목록 (is_public=false 포함 전체)
• create(): 일지 작성 폼
• store(): 일지 저장 (제목, 내용, 애견 선택, 이미지 다중 업로드)
• show(): 일지 상세 보기 (본인 일지 또는 공개 일지만 접근 가능)
• edit(): 일지 수정 폼
• update(): 일지 수정
• destroy(): 일지 삭제
• publish(): 일지 공개 처리 (is_public=true, published_at=now())
• unpublish(): 일지 비공개 전환 (is_public=false)

■ Laravel 컨트롤러 (PublicDiaryController):

• index(): 공개된 애견일지 갤러리 (is_public=true인 일지만, 최신순, 페이지네이션)
• show(): 공개 일지 상세 보기

■ Blade 뷰 구성:

• resources/views/pets/index.blade.php: 내 애견 목록 + 등록 폼 (Alpine.js 모달)
• resources/views/diaries/index.blade.php: 내 애견일지 목록 (공개/비공개 배지 표시)
• resources/views/diaries/create.blade.php: 일지 작성 폼 (이미지 미리보기 포함)
• resources/views/diaries/show.blade.php: 일지 상세 (이미지 갤러리)
• resources/views/diaries/edit.blade.php: 일지 수정 폼
• resources/views/diaries/public/index.blade.php: 공개 일지 갤러리 (카드 그리드)
• resources/views/diaries/public/show.blade.php: 공개 일지 상세

■ 라우트 설정 (routes/web.php): Route::middleware('auth')->group(function () { Route::resource('pets', PetController::class)->except(['show']); Route::resource('diaries', DiaryController::class); Route::patch('/diaries/{diary}/publish', [DiaryController::class, 'publish'])->name('diaries.publish'); Route::patch('/diaries/{diary}/unpublish', [DiaryController::class, 'unpublish'])->name('diaries.unpublish'); }); Route::get('/public-diaries', [PublicDiaryController::class, 'index'])->name('public-diaries.index'); Route::get('/public-diaries/{diary}', [PublicDiaryController::class, 'show'])->name('public-diaries.show');

이미지 업로드는 Storage::disk('public')에 저장하고, php artisan storage:link 로 심볼릭 링크를 생성하세요.

일지 작성 시 이미지 미리보기는 Alpine.js로 구현하세요. 공개/비공개 토글 버튼도 Alpine.js로 확인 다이얼로그를 표시한 후 동작하게 하세요.

Tailwind CSS로 깔끔한 카드 레이아웃을 구성하세요.

**기대 결과:** "애견 프로필을 등록/수정/삭제할 수 있고, 애견일지를 작성하면 기본 비공개로 저장됩니다. 공개 버튼을 누르면 공개 갤러리에 노출되고, 비공개로 다시 전환할 수 있습니다."

---

### Step 4: 커뮤니티 게시판 및 댓글 기능

**프롬프트:**

커뮤니티 게시판과 댓글 기능을 구현하세요.

■ Laravel 컨트롤러 (PostController):

• index(): 게시글 목록 (카테고리 필터, 검색, 페이지네이션)
• create(): 게시글 작성 폼 (카테고리 선택)
• store(): 게시글 저장
• show(): 게시글 상세 + 댓글 목록
• edit(): 게시글 수정 (본인 글만)
• update(): 게시글 수정 처리
• destroy(): 게시글 삭제 (본인 글 또는 관리자)

■ Laravel 컨트롤러 (CommentController):

• store(): 댓글 작성 (post_id, content)
• update(): 댓글 수정 (본인 댓글만)
• destroy(): 댓글 삭제 (본인 댓글 또는 관리자)

■ Laravel 컨트롤러 (Admin\CategoryController):

• index(): 카테고리 관리 페이지
• store(): 카테고리 추가
• update(): 카테고리 수정 (이름, 슬러그, 정렬순서, 활성화 여부)
• destroy(): 카테고리 삭제 (게시글이 있으면 삭제 불가, 경고 표시)

■ Blade 뷰 구성:

• resources/views/posts/index.blade.php:
  • 상단에 카테고리 탭 (전체 + 각 카테고리)
  • 검색 바 (제목+내용 검색)
  • 게시글 리스트 (제목, 작성자, 카테고리, 작성일, 조회수)
  • 페이지네이션
• resources/views/posts/create.blade.php: 게시글 작성 폼
• resources/views/posts/show.blade.php:
  • 게시글 상세 내용
  • 하단에 댓글 목록
  • 댓글 작성 폼
  • 댓글 수정/삭제 버튼 (본인 댓글에만 표시)
• resources/views/posts/edit.blade.php: 게시글 수정 폼
• resources/views/admin/categories/index.blade.php:
  • 카테고리 목록 (드래그 정렬 또는 순서 입력)
  • 카테고리 추가/수정/삭제

■ 라우트 설정: Route::middleware('auth')->group(function () { Route::resource('posts', PostController::class); Route::post('/posts/{post}/comments', [CommentController::class, 'store'])->name('comments.store'); Route::put('/comments/{comment}', [CommentController::class, 'update'])->name('comments.update'); Route::delete('/comments/{comment}', [CommentController::class, 'destroy'])->name('comments.destroy'); });

// 관리자 전용 Route::middleware(['auth', 'admin'])->prefix('admin')->name('admin.')->group(function () { Route::resource('categories', Admin\CategoryController::class)->except(['show', 'create', 'edit']); });

admin 미들웨어를 생성하세요:

• App\Http\Middleware\AdminMiddleware
• is_admin이 true인 유저만 접근 가능
• bootstrap/app.php에 'admin' 별칭으로 등록

게시글 상세 페이지 접근 시 view_count를 1 증가시키세요. 댓글 수정은 Alpine.js로 인라인 편집 모드를 구현하세요.

Tailwind CSS로 게시판 테이블 스타일과 카테고리 탭 UI를 구성하세요.

**기대 결과:** "커뮤니티 게시판에서 카테고리별로 게시글을 조회하고, 작성/수정/삭제할 수 있습니다. 댓글 작성과 인라인 수정/삭제가 작동합니다. 관리자는 카테고리를 추가/수정/삭제할 수 있습니다."

---

### Step 5: 공지사항 및 웹 푸시 알림

**프롬프트:**

공지사항 기능과 웹 푸시 알림을 구현하세요.

■ 웹 푸시 패키지 설치: composer require laravel-notification-channels/webpush php artisan vendor:publish --provider="NotificationChannels\WebPush\WebPushServiceProvider" --tag="migrations" php artisan migrate

User 모델에 NotificationChannels\WebPush\HasPushSubscriptions 트레이트를 추가하세요.

VAPID 키 생성: php artisan webpush:vapid 생성된 키를 .env에 설정하세요.

■ Laravel 컨트롤러 (NoticeController):

• index(): 공지사항 목록 (모든 유저 접근 가능, 페이지네이션)
• show(): 공지사항 상세
• create(): 공지사항 작성 폼 (관리자만)
• store(): 공지사항 저장 + 웹 푸시 발송 (관리자만)
• edit(): 공지사항 수정 폼 (관리자만)
• update(): 공지사항 수정 (관리자만)
• destroy(): 공지사항 삭제 (관리자만)

■ Laravel 컨트롤러 (PushSubscriptionController):

• store(): 푸시 구독 등록 (브라우저에서 전송한 subscription 정보 저장)
• destroy(): 푸시 구독 해제

■ Laravel Notification (NewNoticeNotification):

• toWebPush($notifiable, $notification) 메서드:
  • 제목: 공지사항 제목
  • 본문: 공지사항 내용 앞 100자
  • 액션: 공지사항 상세 페이지 URL
• via() 메서드: ['webpush'] 반환

■ Blade 뷰 구성:

• resources/views/notices/index.blade.php: 공지사항 목록 (제목, 작성일)
• resources/views/notices/show.blade.php: 공지사항 상세
• resources/views/notices/create.blade.php: 공지사항 작성 폼 (관리자)
• resources/views/notices/edit.blade.php: 공지사항 수정 폼 (관리자)

■ 서비스 워커 및 푸시 구독 JavaScript:

• public/sw.js: 서비스 워커 (푸시 수신 및 알림 표시, 알림 클릭 시 해당 URL로 이동)
• resources/views/layouts/app.blade.php에 푸시 구독 스크립트 추가:
  • 로그인한 유저에게 알림 권한 요청
  • 허용 시 PushManager.subscribe()로 구독 생성
  • 구독 정보를 /push-subscriptions로 POST 전송

■ 라우트 설정: Route::get('/notices', [NoticeController::class, 'index'])->name('notices.index'); Route::get('/notices/{notice}', [NoticeController::class, 'show'])->name('notices.show');

Route::middleware(['auth', 'admin'])->prefix('admin')->name('admin.')->group(function () { Route::get('/notices/create', [NoticeController::class, 'create'])->name('notices.create'); Route::post('/notices', [NoticeController::class, 'store'])->name('notices.store'); Route::get('/notices/{notice}/edit', [NoticeController::class, 'edit'])->name('notices.edit'); Route::put('/notices/{notice}', [NoticeController::class, 'update'])->name('notices.update'); Route::delete('/notices/{notice}', [NoticeController::class, 'destroy'])->name('notices.destroy'); });

Route::middleware('auth')->group(function () { Route::post('/push-subscriptions', [PushSubscriptionController::class, 'store']); Route::delete('/push-subscriptions', [PushSubscriptionController::class, 'destroy']); });

공지사항 저장 시 store() 메서드에서 모든 푸시 구독 유저에게 NewNoticeNotification을 발송하세요. 대량 발송 시 큐를 사용하도록 ShouldQueue 인터페이스를 구현하세요.

**기대 결과:** "관리자가 공지사항을 작성하면 웹 푸시 알림이 구독 유저에게 발송됩니다. 유저는 브라우저에서 알림 허용 시 자동으로 구독되며, 알림을 클릭하면 공지사항 상세 페이지로 이동합니다."

---

### Step 6: 메인 페이지, 네비게이션 및 마무리

**프롬프트:**

메인(홈) 페이지, 통합 네비게이션, 그리고 전체적인 UI 마무리를 수행하세요.

■ Laravel 컨트롤러 (HomeController):

• index(): 메인 페이지 데이터
  • 최신 공지사항 3개
  • 최신 공개 애견일지 6개 (썸네일 포함)
  • 인기 커뮤니티 게시글 5개 (조회수 기준)
  • 최신 커뮤니티 게시글 5개

■ Blade 뷰 구성:

• resources/views/home.blade.php:
  • 히어로 섹션 (사이트 소개, 강아지 일러스트 또는 배경 이미지)
  • 최신 공지사항 슬라이드 또는 리스트
  • 공개 애견일지 카드 그리드 (사진 썸네일, 제목, 작성자)
  • 인기 게시글 리스트
  • 최신 게시글 리스트

■ 네비게이션 레이아웃 수정 (resources/views/layouts/navigation.blade.php):

• 로고: "멍멍커뮤니티"
• 메뉴: 홈, 공개일지, 커뮤니티, 공지사항
• 로그인 유저: 내 일지, 내 애견 관리 (드롭다운)
• 관리자: 관리 메뉴 (카테고리 관리, 공지사항 관리)
• 모바일 햄버거 메뉴

■ 라우트 설정: Route::get('/', [HomeController::class, 'index'])->name('home');

■ 추가 마무리 작업:

• 404, 403 에러 페이지 커스터마이징 (resources/views/errors/)
• 플래시 메시지 컴포넌트 (성공/에러 알림 토스트, Alpine.js 자동 닫기)
• 메타 태그 설정 (SEO 기본, Open Graph 태그)
• 프로필 페이지에서 닉네임 수정 기능 추가 (users 테이블에 nickname 컬럼 추가 마이그레이션)
• 전체 페이지 반응형 점검 (모바일, 태블릿, 데스크탑)

Tailwind CSS로 강아지 커뮤니티에 어울리는 따뜻한 톤의 컬러 테마를 적용하세요:

• Primary: amber/orange 계열
• 배경: warm gray 계열
• 카드: 둥근 모서리, 부드러운 그림자

tailwind.config.js에 커스텀 컬러를 설정하세요.

**기대 결과:** "메인 페이지에 최신 콘텐츠가 종합적으로 표시되고, 네비게이션을 통해 모든 기능에 접근할 수 있습니다. 반응형 디자인이 모바일에서도 잘 동작하며, 향후 모바일 앱 전환이 용이한 구조가 완성됩니다."

---

## 모바일 앱 전환 가이드 (향후 참고)

웹 완성 후 모바일 앱 전환 시 다음 방법을 권장합니다:

1. **API 라우트 추가**: 기존 컨트롤러 로직을 재사용하여 `routes/api.php`에 JSON 응답 API를 추가
2. **Laravel Sanctum**으로 모바일 앱 토큰 인증 구현
3. **React Native** 또는 **Flutter**로 모바일 클라이언트 개발
4. 또는 **PWA(Progressive Web App)** 방식으로 현재 웹을 앱처럼 설치 가능하게 구성 (서비스 워커 이미 구현되어 있으므로 manifest.json 추가만으로 가능)

위 내용을 그대로 게시물의 제목/내용 필드에 붙여넣으면 됩니다. Laravel 버전을 13.x로 모두 수정했고, 참고 레시피와 동일한 형식(프로젝트 개요 → 기능 → 기술 스택 → 제약 조건 → Step별 프롬프트 + 기대 결과)으로 구성했습니다.