입문 PHP Laravel AI: Claude

🍰 홈베이킹 레시피북 - 내가 만든 디저트 아카이브

리포지토리명 homebaking-recipe-archive

54 0건 제출 04-20

문제 설명

프로젝트 개요

홈베이킹을 즐기는 사람들을 위한 개인 레시피 아카이브 웹사이트를 만듭니다. 만든 디저트의 사진, 레시피, 난이도, 소요 시간을 기록하고 성공/실패 메모를 남길 수 있습니다. Laravel 13.x + Blade 템플릿 + Tailwind CSS로 구현하며, SQLite 데이터베이스를 사용하여 간단하게 시작할 수 있습니다.

필수 기능

레시피 등록: 디저트 이름, 카테고리(케이크/쿠키/타르트/빵 등), 난이도(⭐~⭐⭐⭐⭐⭐), 소요 시간, 재료 목록, 만드는 방법, 완성 사진 URL 입력
레시피 목록: 카드 형태로 썸네일 이미지와 함께 표시, 카테고리별 필터링 기능
레시피 상세 보기: 전체 레시피 내용, 성공/실패 메모, 만든 날짜 표시
레시피 수정/삭제: 기록한 레시피 편집 및 삭제 기능
성공률 배지: 레시피별로 "대성공 🎉", "보통 😊", "재도전 필요 💪" 등 상태 표시

선택 추가 기능 (보너스)

검색 기능: 디저트 이름이나 재료로 검색
즐겨찾기: 자주 만드는 레시피에 하트 표시
태그 시스템: #초콜릿 #비건 #글루텐프리 등 자유 태그 추가
소요 시간 통계: 평균 베이킹 시간, 가장 오래 걸린 레시피 등 대시보드
다크 모드 토글

기술 스택

Backend: Laravel 13.x (Blade 템플릿)
Database: SQLite
Frontend: Tailwind CSS
이미지: 외부 URL 사용 (Unsplash 등)

학습 목표

Laravel 라우팅과 컨트롤러 기본 개념 이해
Blade 템플릿 문법과 컴포넌트 활용
Eloquent ORM으로 CRUD 구현
Tailwind CSS로 반응형 카드 레이아웃 구성
Form validation과 에러 메시지 처리

제약 조건

• Laravel 13.x 사용 (최신 버전)
• Blade 템플릿 엔진 사용 (React/Vue 금지)
• SQLite 데이터베이스 사용
• Tailwind CSS로 스타일링
• 이미지는 외부 URL로 저장 (파일 업로드 구현 불필요)
• 단일 사용자용 (인증 시스템 불필요)
• 모바일 반응형 디자인 필수

프롬프트 레시피

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

1

Step 1

mkdir homebaking-recipe-archive && cd homebaking-recipe-archive

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

Laravel 13.x 프로젝트를 생성하고 기본 설정을 완료해주세요:

1. Laravel 13.x 설치 (composer create-project laravel/laravel . "13.*")
2. .env 파일에서 데이터베이스를 SQLite로 설정:
   - DB_CONNECTION=sqlite
   - DB_DATABASE에 database/database.sqlite 경로 지정
   - 다른 DB 관련 설정은 주석 처리
3. database/database.sqlite 파일 생성 (touch 명령 또는 빈 파일 생성)
4. Tailwind CSS 설치 및 설정 (npm install, vite.config.js에 tailwind 플러그인 추가)
5. tailwind.config.js 생성 및 content 경로에 blade 파일 포함
6. resources/css/app.css에 Tailwind 디렉티브 추가 (@tailwind base, components, utilities)
7. resources/views/layouts/app.blade.php 레이아웃 파일 생성:
   - <!DOCTYPE html> 기본 구조
   - <head>에 @vite(['resources/css/app.css', 'resources/js/app.js']) 포함
   - <body>에 네비게이션 바 (홈베이킹 레시피북 🍰 로고, "레시피 추가" 버튼)
   - @yield('content') 섹션
   - 하단에 저작권 정보
   - Tailwind CSS로 스타일링 (배경색, 패딩, 반응형 컨테이너)

개발 서버 실행 명령과 확인 방법도 알려주세요.

기대 결과: Laravel 13.x 프로젝트가 생성되고, SQLite 데이터베이스 파일이 준비됩니다. Tailwind CSS가 설치되고, 기본 레이아웃 파일(app.blade.php)이 생성되어 네비게이션 바와 푸터가 표시됩니다. npm run dev와 php artisan serve 명령으로 개발 서버를 실행하면 Tailwind 스타일이 적용된 기본 레이아웃을 확인할 수 있습니다.

2

Step 2

레시피 데이터를 저장할 데이터베이스 테이블과 모델을 생성해주세요:

1. Recipe 모델 생성 (php artisan make:model Recipe -m):
   - app/Models/Recipe.php 파일 확인
   - $fillable 속성에 모든 입력 가능 필드 추가

2. 마이그레이션 파일 (database/migrations/xxxx_create_recipes_table.php) 작성:
   - id (자동 생성)
   - name: string, 디저트 이름
   - category: string, 카테고리 (케이크/쿠키/타르트/빵/기타)
   - difficulty: integer, 난이도 (1~5)
   - duration_minutes: integer, 소요 시간(분)
   - ingredients: text, 재료 목록
   - instructions: text, 만드는 방법
   - image_url: string, nullable, 완성 사진 URL
   - status: string, default 'pending', 성공 여부 (pending/success/retry)
   - notes: text, nullable, 메모
   - timestamps (created_at, updated_at 자동 생성)

3. 마이그레이션 실행 (php artisan migrate)

4. 테스트 데이터 시더 생성 (database/seeders/RecipeSeeder.php):
   - 3~5개의 샘플 레시피 데이터 생성 (초코칩 쿠키, 바닐라 케이크, 애플 파이 등)
   - 이미지는 Unsplash 베이킹 이미지 URL 사용
   - php artisan db:seed --class=RecipeSeeder 실행 방법 안내

데이터베이스 테이블 구조와 샘플 데이터를 확인하는 방법도 알려주세요.

기대 결과: recipes 테이블이 생성되고, Recipe 모델이 준비됩니다. 마이그레이션이 성공적으로 실행되어 SQLite 데이터베이스에 테이블이 생성됩니다. 시더를 실행하면 3~5개의 샘플 레시피 데이터가 삽입되어 즉시 테스트할 수 있습니다. php artisan tinker로 Recipe::all()을 실행하여 데이터를 확인할 수 있습니다.

3

Step 3

레시피 목록을 보여주는 메인 페이지를 만들어주세요:

1. RecipeController 생성 (php artisan make:controller RecipeController):
   - index() 메서드: 모든 레시피를 최신순으로 조회하여 뷰에 전달
   - 카테고리 필터링 기능 추가 (쿼리 파라미터 ?category=케이크)

2. routes/web.php에 라우트 추가:
   - GET / → RecipeController@index (메인 페이지)

3. resources/views/recipes/index.blade.php 생성:
   - @extends('layouts.app') 레이아웃 상속
   - 페이지 제목: "내 베이킹 레시피북 🍰"
   - 카테고리 필터 버튼 (전체/케이크/쿠키/타르트/빵/기타)
   - 레시피 카드 그리드 레이아웃 (grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3)
   - 각 카드에 표시:
     * 썸네일 이미지 (image_url, 없으면 기본 이미지)
     * 디저트 이름
     * 카테고리 배지
     * 난이도 별 표시 (⭐ x difficulty)
     * 소요 시간 (예: 45분)
     * 상태 배지 (대성공 🎉 / 보통 😊 / 재도전 필요 💪)
     * "자세히 보기" 링크
   - 레시피가 없을 때: "아직 레시피가 없어요. 첫 레시피를 추가해보세요!" 메시지
   - Tailwind CSS로 카드 디자인 (shadow, rounded, hover 효과)

4. 카테고리 필터 클릭 시 URL에 쿼리 파라미터 추가하여 페이지 새로고침

반응형 디자인과 호버 효과를 포함해주세요.

기대 결과: 메인 페이지(/)에 접속하면 레시피 목록이 카드 형태로 표시됩니다. 카테고리 필터 버튼을 클릭하면 해당 카테고리의 레시피만 필터링되어 표시됩니다. 각 카드에는 썸네일, 이름, 난이도, 소요 시간, 상태 배지가 보기 좋게 배치되며, 호버 시 카드가 살짝 떠오르는 효과가 적용됩니다. 모바일/태블릿/데스크톱에서 그리드 컬럼 수가 자동 조정됩니다.

4

Step 4

레시피 상세 페이지와 새 레시피 추가 기능을 구현해주세요:

1. RecipeController에 메서드 추가:
   - show($id): 특정 레시피 상세 조회
   - create(): 레시피 추가 폼 표시
   - store(Request $request): 새 레시피 저장 (유효성 검사 포함)

2. routes/web.php에 라우트 추가:
   - GET /recipes/{id} → RecipeController@show
   - GET /recipes/create → RecipeController@create
   - POST /recipes → RecipeController@store

3. resources/views/recipes/show.blade.php 생성 (상세 페이지):
   - 큰 이미지 표시 (있으면)
   - 디저트 이름 (제목)
   - 카테고리, 난이도, 소요 시간 정보
   - 상태 배지 (대성공/보통/재도전 필요)
   - 재료 목록 (줄바꿈 처리하여 리스트로 표시)
   - 만드는 방법 (단계별로 보기 좋게)
   - 메모 섹션 (있으면)
   - 만든 날짜 (created_at)
   - "수정" / "삭제" / "목록으로" 버튼
   - Tailwind CSS로 읽기 편한 타이포그래피

4. resources/views/recipes/create.blade.php 생성 (추가 폼):
   - 폼 요소:
     * 디저트 이름 (text input, required)
     * 카테고리 (select: 케이크/쿠키/타르트/빵/기타, required)
     * 난이도 (radio buttons 1~5, required)
     * 소요 시간 (number input, 분 단위, required)
     * 재료 목록 (textarea, placeholder: "밀가루 200g\n설탕 100g\n...", required)
     * 만드는 방법 (textarea, placeholder: "1. 오븐을 180도로 예열합니다.\n2. ...", required)
     * 완성 사진 URL (text input, optional)
     * 상태 (select: pending/success/retry, default pending)
     * 메모 (textarea, optional)
   - @csrf 토큰 포함
   - 유효성 검사 에러 메시지 표시 (@error 디렉티브)
   - "저장" / "취소" 버튼
   - Tailwind CSS 폼 스타일링 (focus 효과, 라벨 디자인)

5. store() 메서드에서 유효성 검사:
   - name, category, difficulty, duration_minutes, ingredients, instructions 필수
   - difficulty는 1~5 범위
   - duration_minutes는 양수
   - 저장 후 레시피 상세 페이지로 리다이렉트 (성공 메시지 포함)

폼 유효성 검사와 에러 메시지 처리를 포함해주세요.

기대 결과: 레시피 카드의 "자세히 보기"를 클릭하면 상세 페이지(/recipes/{id})로 이동하여 전체 레시피 내용을 볼 수 있습니다. 네비게이션의 "레시피 추가" 버튼을 클릭하면 추가 폼(/recipes/create)이 표시되고, 모든 필드를 입력하여 제출하면 새 레시피가 저장됩니다. 필수 항목을 빠트리면 에러 메시지가 표시되며, 저장 성공 시 해당 레시피 상세 페이지로 이동하고 "레시피가 추가되었습니다!" 메시지가 표시됩니다.

5

Step 5

레시피 수정 및 삭제 기능을 완성해주세요:

1. RecipeController에 메서드 추가:
   - edit($id): 수정 폼 표시 (기존 데이터 로드)
   - update(Request $request, $id): 레시피 수정 저장 (유효성 검사 포함)
   - destroy($id): 레시피 삭제

2. routes/web.php에 라우트 추가:
   - GET /recipes/{id}/edit → RecipeController@edit
   - PUT /recipes/{id} → RecipeController@update
   - DELETE /recipes/{id} → RecipeController@destroy

3. resources/views/recipes/edit.blade.php 생성:
   - create.blade.php와 유사하지만 기존 데이터가 입력된 상태
   - 폼 method를 @method('PUT')로 설정
   - 모든 필드에 기존 값 표시 (old() 헬퍼와 모델 데이터 조합)
   - "수정 완료" / "취소" 버튼
   - Tailwind CSS 스타일 동일하게 적용

4. update() 메서드:
   - store()와 동일한 유효성 검사
   - 레시피 업데이트 후 상세 페이지로 리다이렉트 (성공 메시지)

5. destroy() 메서드:
   - 레시피 삭제 후 메인 페이지로 리다이렉트 (삭제 완료 메시지)

6. show.blade.php에서 삭제 버튼:
   - form으로 DELETE 요청 전송 (@method('DELETE'))
   - JavaScript confirm 확인 창 ("정말 삭제하시겠습니까?")

7. 세션 플래시 메시지 표시:
   - layouts/app.blade.php에 @if(session('success')) 메시지 영역 추가
   - Tailwind CSS alert 스타일 (녹색 배경, 체크 아이콘)

모든 CRUD 기능이 완성되도록 해주세요.

기대 결과: 레시피 상세 페이지에서 "수정" 버튼을 클릭하면 수정 폼(/recipes/{id}/edit)이 표시되고 기존 내용이 입력되어 있습니다. 내용을 변경하고 "수정 완료"를 누르면 업데이트되고 "레시피가 수정되었습니다!" 메시지가 표시됩니다. "삭제" 버튼을 클릭하면 확인 창이 뜨고, 확인하면 레시피가 삭제되며 메인 페이지로 이동합니다. 모든 성공 메시지는 상단에 녹색 알림으로 표시됩니다. 이제 레시피 추가/조회/수정/삭제 모든 기능이 완성되었습니다!

제출된 작품 (0)

로그인 후 제출

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

댓글 (0)

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

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