입문 PHP Laravel AI: Claude

Laravel 블로그 포스트 관리 - 초보자용 CRUD 시스템

리포지토리명 laravel-blog-crud-beginner

89 1건 제출 03-19

문제 설명

Laravel 블로그 포스트 관리 시스템

Laravel 13.x와 Blade 템플릿을 사용하여 블로그 포스트를 작성, 조회, 수정, 삭제할 수 있는 간단한 CRUD 애플리케이션을 만듭니다.

필수 기능

포스트 목록 페이지: 작성된 모든 블로그 포스트를 카드 형태로 표시
포스트 작성: 제목, 내용을 입력하여 새 포스트 생성
포스트 상세 보기: 개별 포스트의 전체 내용 확인
포스트 수정: 기존 포스트의 제목과 내용 변경
포스트 삭제: 불필요한 포스트 제거
SQLite 데이터베이스: 간단한 로컬 DB로 데이터 저장
Tailwind CSS: 깔끔한 UI 디자인
폼 유효성 검사: 제목과 내용 필수 입력 체크

선택 추가 기능 (보너스)

포스트 작성일/수정일 자동 표시
포스트 미리보기 (내용 일부만 표시)
검색 기능 (제목으로 검색)
페이지네이션 (목록이 많을 때)
포스트 카테고리 분류

학습 목표

Laravel의 기본 라우팅, 컨트롤러, 모델, 마이그레이션, Blade 템플릿 문법을 익히고, 실제 동작하는 웹 애플리케이션을 만들어봅니다.

제약 조건

• Laravel 13.x 사용 (구버전 금지)
• Blade 템플릿 엔진만 사용 (React/Vue 등 SPA 프레임워크 금지)
• SQLite 데이터베이스 사용 (.env 설정)
• Tailwind CSS로 UI 스타일링
• RESTful 라우트 규칙 준수 (resource 컨트롤러 활용)
• Laravel의 폼 요청 유효성 검사 사용
• CSRF 보호 토큰 포함
• Blade 컴포넌트 활용하여 레이아웃 구성

프롬프트 레시피

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

1

Step 1

mkdir laravel-blog-crud-beginner && cd laravel-blog-crud-beginner

이 폴더에서 Laravel 13.x 프로젝트를 새로 생성합니다.

다음 작업을 수행해주세요:

1. Laravel 13.x 프로젝트를 생성합니다 (composer create-project laravel/laravel . 또는 Laravel installer 사용)
2. .env 파일을 수정하여 SQLite를 사용하도록 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE 경로를 database/database.sqlite로 설정
   - database/database.sqlite 파일을 생성 (touch 명령 또는 빈 파일 생성)
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 지시문 추가 (@tailwind base; @tailwind components; @tailwind utilities;)
4. npm run dev를 실행하여 Vite 개발 서버 시작
5. php artisan serve로 Laravel 개발 서버 실행

프로젝트가 정상적으로 실행되고 브라우저에서 Laravel 기본 페이지가 보이는지 확인해주세요.

기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, Tailwind CSS가 통합되어 개발 서버가 정상 실행됩니다. 브라우저에서 localhost:8000으로 접속하면 Laravel 기본 환영 페이지가 표시됩니다.

2

Step 2

블로그 포스트를 저장할 데이터베이스 구조를 만듭니다.

다음 작업을 수행해주세요:

1. Post 모델과 마이그레이션을 생성합니다:
   php artisan make:model Post -m

2. 생성된 마이그레이션 파일(database/migrations/xxxx_create_posts_table.php)을 수정하여 다음 컬럼을 추가:
   - id (기본 포함)
   - title (string, 255자, 필수)
   - content (text, 필수)
   - timestamps (created_at, updated_at - 기본 포함)

3. app/Models/Post.php 모델 파일에서 $fillable 속성 설정:
   protected $fillable = ['title', 'content'];

4. 마이그레이션 실행:
   php artisan migrate

5. 마이그레이션이 성공했는지 확인 (database/database.sqlite에 posts 테이블이 생성되었는지)

모든 컬럼이 올바르게 생성되었는지 확인해주세요.

기대 결과: Post 모델과 posts 테이블이 생성되고, title, content 컬럼이 포함됩니다. 마이그레이션이 성공적으로 실행되어 SQLite 데이터베이스에 테이블이 만들어집니다.

3

Step 3

블로그 포스트를 관리할 컨트롤러와 라우트를 설정합니다.

다음 작업을 수행해주세요:

1. Resource 컨트롤러를 생성합니다:
   php artisan make:controller PostController --resource

2. routes/web.php 파일에 RESTful 라우트를 추가:
   Route::resource('posts', PostController::class);
   (기존 환영 페이지 라우트는 유지하거나 posts로 리다이렉트하도록 변경)

3. app/Http/Controllers/PostController.php에서 다음 메서드를 구현:

   - index(): 모든 포스트 목록을 가져와서 posts.index 뷰로 전달
     $posts = Post::latest()->get();
     return view('posts.index', compact('posts'));

   - create(): 포스트 작성 폼을 보여주는 posts.create 뷰 반환

   - store(Request $request): 새 포스트 저장
     - 유효성 검사: title(required, max:255), content(required)
     - Post::create()로 저장
     - 성공 메시지와 함께 posts.index로 리다이렉트

   - show(Post $post): 개별 포스트 상세 보기 posts.show 뷰

   - edit(Post $post): 포스트 수정 폼 posts.edit 뷰

   - update(Request $request, Post $post): 포스트 업데이트
     - 유효성 검사
     - $post->update()로 수정
     - posts.show로 리다이렉트

   - destroy(Post $post): 포스트 삭제
     - $post->delete()
     - posts.index로 리다이렉트

컨트롤러의 모든 메서드가 올바르게 구현되었는지 확인해주세요.

기대 결과: PostController가 생성되고 7개의 RESTful 메서드(index, create, store, show, edit, update, destroy)가 구현됩니다. 라우트가 설정되어 /posts URL로 접근할 수 있게 됩니다.

4

Step 4

Blade 템플릿으로 UI를 만듭니다. 레이아웃과 포스트 목록, 작성 페이지를 구현합니다.

다음 작업을 수행해주세요:

1. resources/views/layouts/app.blade.php 레이아웃 파일 생성:
   - HTML 기본 구조
   - <head>에 @vite(['resources/css/app.css', 'resources/js/app.js']) 포함
   - 네비게이션 바: "블로그 포스트 관리" 제목, "홈" 링크, "새 포스트 작성" 링크
   - @yield('content') 영역
   - Tailwind CSS 스타일 적용 (container, mx-auto, p-4 등)

2. resources/views/posts/index.blade.php 생성:
   - @extends('layouts.app')
   - 포스트 목록을 그리드 또는 카드 형태로 표시
   - 각 카드에 제목, 내용 미리보기(100자), 작성일, "상세보기" 버튼
   - 포스트가 없을 때 "아직 포스트가 없습니다" 메시지
   - Tailwind로 반응형 그리드 (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3)

3. resources/views/posts/create.blade.php 생성:
   - @extends('layouts.app')
   - 포스트 작성 폼 (POST /posts)
   - @csrf 토큰 포함
   - 제목 입력 필드 (input type=text, name=title, required)
   - 내용 입력 필드 (textarea name=content, rows=10, required)
   - "작성하기" 버튼, "취소" 버튼 (posts.index로)
   - 유효성 검사 에러 표시 (@error 지시문 사용)
   - Tailwind로 폼 스타일링 (form-input, btn 등)

모든 뷰 파일이 Tailwind CSS로 깔끔하게 스타일링되었는지 확인하고, 브라우저에서 /posts와 /posts/create 페이지가 제대로 표시되는지 테스트해주세요.

기대 결과: 레이아웃 파일과 포스트 목록, 작성 페이지가 생성됩니다. Tailwind CSS로 스타일링된 UI가 표시되고, 네비게이션을 통해 페이지 간 이동이 가능합니다. 아직 포스트가 없으므로 목록은 비어있습니다.

5

Step 5

포스트 상세 보기, 수정, 삭제 기능의 뷰를 완성합니다.

다음 작업을 수행해주세요:

1. resources/views/posts/show.blade.php 생성:
   - @extends('layouts.app')
   - 포스트 제목을 큰 제목으로 표시 (text-3xl font-bold)
   - 작성일/수정일 표시 (작은 회색 텍스트)
   - 포스트 전체 내용 표시 (whitespace-pre-wrap으로 줄바꿈 유지)
   - "수정" 버튼 (posts.edit로 이동)
   - "삭제" 버튼 (폼으로 감싸서 DELETE 메서드, @method('DELETE') 사용)
   - "목록으로" 버튼 (posts.index로)
   - 삭제 버튼 클릭 시 확인 메시지 (onclick="return confirm('정말 삭제하시겠습니까?')")

2. resources/views/posts/edit.blade.php 생성:
   - create.blade.php와 유사하지만 PUT 메서드 사용 (@method('PUT'))
   - 기존 포스트 데이터를 value/내용으로 미리 채움 ({{ $post->title }}, {{ $post->content }})
   - 폼 action을 route('posts.update', $post)로 설정
   - "수정하기" 버튼, "취소" 버튼

3. 세션 플래시 메시지 표시를 위해 layouts/app.blade.php에 추가:
   - @if(session('success'))
     <div class="alert">{{ session('success') }}</div>
   - Tailwind로 알림 스타일링 (bg-green-100, text-green-800 등)

4. PostController에서 리다이렉트 시 세션 메시지 추가:
   - store: ->with('success', '포스트가 작성되었습니다.')
   - update: ->with('success', '포스트가 수정되었습니다.')
   - destroy: ->with('success', '포스트가 삭제되었습니다.')

모든 CRUD 기능이 정상 작동하는지 브라우저에서 테스트해주세요. 포스트를 생성, 조회, 수정, 삭제하는 전체 흐름을 확인하세요.

기대 결과: 포스트 상세 보기, 수정, 삭제 페이지가 완성됩니다. 모든 CRUD 기능이 동작하고, 성공 메시지가 표시됩니다. 사용자는 포스트를 자유롭게 생성, 읽기, 수정, 삭제할 수 있습니다.