입문 PHP Laravel AI: Claude

Laravel 간단 방명록 - 방문자 메시지 & 감정 이모지

리포지토리명 laravel-guestbook-with-emoji

125 0건 제출 03-31

문제 설명

📝 Laravel 간단 방명록 만들기

누구나 방문해서 메시지를 남길 수 있는 따뜻한 방명록 웹사이트를 만듭니다. 방문자는 자신의 이름, 메시지, 그리고 감정을 표현하는 이모지를 선택하여 글을 남길 수 있습니다. 모든 메시지는 시간 순서대로 카드 형태로 예쁘게 표시됩니다.

Laravel 13.x와 Blade 템플릿, Tailwind CSS를 활용하여 데이터베이스 CRUD의 기초를 배우고, 사용자 입력 폼과 데이터 검증, 그리고 동적 UI 렌더링을 경험할 수 있습니다.

✅ 필수 기능

방명록 메시지 작성 폼 (이름, 메시지, 이모지 선택)
작성된 메시지 목록을 카드 형태로 표시 (최신순)
SQLite 데이터베이스에 메시지 저장
Tailwind CSS로 깔끔하고 반응형 디자인
이모지 선택 버튼 (😊, 😍, 😢, 😂, 🎉, 👍 등 6가지)
메시지 작성 시간 표시 ("5분 전", "1시간 전" 형식)

🎁 선택 추가 기능 (보너스)

메시지 삭제 기능 (비밀번호 확인 후 삭제)
메시지 검색 기능 (이름 또는 내용으로 검색)
페이지네이션 (한 페이지에 10개씩 표시)
다크모드 토글 버튼
방명록 통계 (총 방문자 수, 이모지별 개수)

이 프로젝트를 통해 Laravel의 라우팅, 컨트롤러, 모델, 마이그레이션, Blade 템플릿 문법을 자연스럽게 익힐 수 있습니다.

제약 조건

• Laravel 13.x 최신 버전 사용
• Blade 템플릿 엔진 사용 (React/Vue 금지)
• Tailwind CSS로 스타일링
• SQLite 데이터베이스 사용 (간단한 설정)
• 별도 인증 시스템 불필요 (누구나 작성 가능)
• 프론트엔드 JavaScript는 최소화 (Alpine.js 선택 사용 가능)
• 반응형 디자인 (모바일/태블릿/데스크톱 지원)

프롬프트 레시피

아래 프롬프트를 순서대로 AI에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.

1

Step 1

mkdir laravel-guestbook-with-emoji && cd laravel-guestbook-with-emoji

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

Laravel 13.x 최신 버전으로 새 프로젝트를 생성하고, Tailwind CSS를 설치 및 설정해주세요.

요구사항:
1. `composer create-project laravel/laravel .` 명령으로 현재 폴더에 Laravel 설치
2. `.env` 파일에서 데이터베이스를 SQLite로 설정 (DB_CONNECTION=sqlite, DB_DATABASE=/절대경로/database/database.sqlite)
3. `database/database.sqlite` 파일 생성
4. Tailwind CSS 설치:
   - `npm install -D tailwindcss postcss autoprefixer`
   - `npx tailwindcss init -p`
   - `tailwind.config.js`에서 content 경로 설정: `['./resources/**/*.blade.php', './resources/**/*.js']`
5. `resources/css/app.css`에 Tailwind 디렉티브 추가:
   ```css
   @tailwind base;
   @tailwind components;
   @tailwind utilities;
   ```
6. `vite.config.js`에서 input에 `resources/css/app.css` 포함 확인
7. `npm install && npm run dev` 실행하여 Vite 개발 서버 시작
8. `php artisan serve` 명령으로 Laravel 서버 시작

프로젝트 초기 설정이 완료되면 브라우저에서 http://localhost:8000 접속 시 Laravel 기본 화면이 보여야 합니다.

기대 결과: Laravel 13.x 프로젝트가 생성되고, Tailwind CSS가 설정되며, SQLite 데이터베이스 파일이 준비됩니다. Vite와 Laravel 개발 서버가 실행되어 기본 화면이 정상 작동합니다.

2

Step 2

방명록 메시지를 저장할 데이터베이스 테이블과 모델을 생성합니다.

요구사항:
1. `php artisan make:model GuestbookEntry -m` 명령으로 모델과 마이그레이션 파일 동시 생성
2. 마이그레이션 파일(`database/migrations/xxxx_create_guestbook_entries_table.php`)에 다음 컬럼 정의:
   - `id` (primary key, auto increment)
   - `name` (string, 방문자 이름, 최대 100자)
   - `message` (text, 방명록 메시지)
   - `emoji` (string, 선택한 이모지, 최대 10자)
   - `timestamps` (created_at, updated_at)
3. `app/Models/GuestbookEntry.php` 모델 파일에서 `$fillable` 속성 설정:
   ```php
   protected $fillable = ['name', 'message', 'emoji'];
   ```
4. `php artisan migrate` 명령 실행하여 테이블 생성
5. 마이그레이션 성공 확인 후, 데이터베이스에 `guestbook_entries` 테이블이 생성되었는지 확인

이제 방명록 데이터를 저장할 준비가 완료되었습니다.

기대 결과: `guestbook_entries` 테이블이 SQLite 데이터베이스에 생성되고, GuestbookEntry 모델이 준비됩니다. 마이그레이션이 성공적으로 완료됩니다.

3

Step 3

방명록 메시지 작성 폼과 목록을 보여주는 메인 페이지를 만듭니다.

요구사항:
1. `php artisan make:controller GuestbookController` 명령으로 컨트롤러 생성
2. `GuestbookController`에 `index` 메서드 작성:
   - 모든 방명록 메시지를 최신순으로 가져오기 (`GuestbookEntry::latest()->get()`)
   - `resources/views/guestbook/index.blade.php` 뷰에 데이터 전달
3. `routes/web.php`에 라우트 등록:
   ```php
   use App\Http\Controllers\GuestbookController;
   Route::get('/', [GuestbookController::class, 'index'])->name('guestbook.index');
   ```
4. `resources/views/guestbook/index.blade.php` 뷰 파일 생성:
   - Tailwind CSS로 스타일링된 레이아웃
   - 상단에 "방명록" 제목과 설명
   - 메시지 작성 폼:
     - 이름 입력 필드 (required)
     - 메시지 textarea (required)
     - 이모지 선택 버튼 6개 (😊, 😍, 😢, 😂, 🎉, 👍) - 라디오 버튼 형태로 구현
     - 제출 버튼
   - 작성된 메시지 목록을 카드 형태로 표시:
     - 각 카드에 이모지, 이름, 메시지, 작성 시간 표시
     - 작성 시간은 `{{ $entry->created_at->diffForHumans() }}` 형식으로 표시
   - 메시지가 없을 때 "아직 메시지가 없습니다" 안내 문구
5. `resources/views/layouts/app.blade.php` 레이아웃 파일 생성:
   - `<!DOCTYPE html>` 기본 구조
   - `<head>`에 `@vite(['resources/css/app.css'])` 추가
   - `<body>` 태그에 Tailwind 클래스 적용 (예: `bg-gray-50 min-h-screen`)

깔끔하고 사용자 친화적인 디자인으로 구성해주세요. 이모지 선택 버튼은 클릭 시 시각적 피드백(배경색 변경)을 제공하세요.

기대 결과: 방명록 메인 페이지가 표시되며, 메시지 작성 폼과 (아직 비어있는) 메시지 목록이 Tailwind CSS로 예쁘게 스타일링되어 나타납니다. 이모지 선택 버튼이 작동합니다.

4

Step 4

방명록 메시지를 저장하는 기능을 구현합니다.

요구사항:
1. `GuestbookController`에 `store` 메서드 추가:
   - 폼 데이터 검증 (Laravel Validation 사용):
     ```php
     $validated = $request->validate([
         'name' => 'required|string|max:100',
         'message' => 'required|string|max:1000',
         'emoji' => 'required|string|max:10',
     ]);
     ```
   - 검증된 데이터로 새 메시지 생성:
     ```php
     GuestbookEntry::create($validated);
     ```
   - 성공 메시지와 함께 메인 페이지로 리다이렉트:
     ```php
     return redirect()->route('guestbook.index')->with('success', '메시지가 등록되었습니다!');
     ```
2. `routes/web.php`에 POST 라우트 추가:
   ```php
   Route::post('/', [GuestbookController::class, 'store'])->name('guestbook.store');
   ```
3. `index.blade.php` 폼에 다음 추가:
   - `@csrf` 디렉티브 (CSRF 토큰)
   - `action="{{ route('guestbook.store') }}"` 및 `method="POST"`
   - 각 input 필드에 `name` 속성 설정 (name, message, emoji)
4. 폼 상단에 성공 메시지 표시 영역 추가:
   ```blade
   @if(session('success'))
       <div class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
           {{ session('success') }}
       </div>
   @endif
   ```
5. 검증 오류 메시지 표시:
   ```blade
   @if($errors->any())
       <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
           <ul>
               @foreach($errors->all() as $error)
                   <li>{{ $error }}</li>
               @endforeach
           </ul>
       </div>
   @endif
   ```

이제 폼을 제출하면 메시지가 데이터베이스에 저장되고, 목록에 즉시 반영됩니다.

기대 결과: 방명록 메시지 작성 폼이 작동하며, 제출 시 데이터베이스에 저장되고 페이지가 새로고침되어 새 메시지가 목록에 표시됩니다. 성공/오류 메시지가 적절히 표시됩니다.

5

Step 5

방명록 UI를 더욱 세련되게 개선하고, 이모지 선택 인터랙션을 향상시킵니다.

요구사항:
1. 이모지 선택 버튼 개선:
   - 각 이모지를 큰 버튼 형태로 표시 (예: `text-4xl p-4`)
   - 선택된 이모지는 배경색과 테두리가 강조되도록 스타일 적용
   - Alpine.js를 사용하여 선택 상태 관리 (선택 사항):
     ```blade
     <div x-data="{ selectedEmoji: '😊' }">
         <button type="button" @click="selectedEmoji = '😊'" :class="selectedEmoji === '😊' ? 'bg-blue-100 border-blue-500' : 'bg-white border-gray-300'" class="border-2 rounded-lg p-4 text-4xl transition">😊</button>
         <input type="hidden" name="emoji" :value="selectedEmoji">
     </div>
     ```
   - 또는 순수 CSS와 라디오 버튼으로 구현 가능
2. 메시지 카드 디자인 개선:
   - 각 카드에 그림자와 호버 효과 추가 (`shadow-md hover:shadow-lg transition`)
   - 이모지를 카드 왼쪽에 크게 표시
   - 이름은 굵은 글씨로, 메시지는 일반 글씨로
   - 작성 시간은 작고 회색 글씨로 우측 하단에 배치
3. 반응형 그리드 레이아웃:
   - 메시지 목록을 그리드로 배치 (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4`)
4. 페이지 상단에 통계 정보 추가 (선택):
   - 총 메시지 개수 표시
   - 이모지별 개수 표시 (예: 😊 x3, 😍 x5)
5. Alpine.js 사용 시 레이아웃 파일 `<head>`에 CDN 추가:
   ```html
   <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
   ```

최종적으로 방명록이 시각적으로 매력적이고 사용하기 편리하게 완성되어야 합니다.

기대 결과: 방명록 페이지가 시각적으로 개선되며, 이모지 선택이 직관적이고, 메시지 카드가 그리드 형태로 깔끔하게 표시됩니다. 반응형 디자인이 적용되어 모바일에서도 잘 보입니다.

제출된 작품 (0)

로그인 후 제출

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

댓글 (0)

로그인 후 댓글을 남길 수 있습니다.

아직 댓글이 없습니다. 첫 번째 댓글을 남겨보세요!