나만의 레시피 카드 컬렉션 - 바이브코딩 레시피
입문 PHP Laravel

나만의 레시피 카드 컬렉션

리포지토리명 recipe-card-collection
조회수 54 1건 제출 1주 전

문제 설명

프로젝트 개요

간단한 요리 레시피를 카드 형태로 저장하고 관리하는 웹 애플리케이션입니다. 레시피 제목, 재료, 조리법을 입력하면 예쁜 카드로 표시되며, 언제든지 확인할 수 있습니다.

필수 기능

  • 레시피 추가 폼 (제목, 재료, 조리법 입력)
  • 레시피 목록을 카드 형태로 표시
  • 각 레시피 카드에 삭제 버튼
  • 레시피 데이터는 데이터베이스에 저장
  • 반응형 디자인 (모바일에서도 예쁘게)
  • 레시피가 없을 때 안내 메시지 표시

보너스 기능

  • 레시피 카테고리 선택 (한식, 양식, 중식, 일식 등)
  • 재료를 쉼표로 구분하여 리스트로 표시
  • 카드에 요리 시간 정보 추가
  • 카드 호버 시 애니메이션 효과
  • 간단한 검색 기능 (제목으로 필터링)

기술 스택

  • Laravel 12.x (PHP 프레임워크)
  • Blade 템플릿 엔진
  • Tailwind CSS (스타일링)
  • SQLite 또는 MySQL 데이터베이스

제약 조건

  • Laravel 12.x 최신 버전 사용 필수
  • Blade 템플릿 엔진 활용
  • 데이터베이스 마이그레이션 파일 생성
  • CSRF 보호 적용
  • 입력 데이터 유효성 검사 (Validation) 포함
  • Tailwind CSS 사용 권장 (또는 Bootstrap)
  • 단일 페이지에서 모든 기능 동작
  • 코드 주석을 한글로 작성

프롬프트 레시피

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

1
Step 1
Laravel 12.x 프로젝트를 생성하고 기본 설정을 해주세요.

요구사항:
1. 프로젝트명: recipe-card-collection
2. SQLite 데이터베이스 사용 설정 (.env 파일 수정)
3. Tailwind CSS 설치 및 설정
4. 'recipes' 테이블을 위한 마이그레이션 파일 생성:
   - id (primary key)
   - title (string, 레시피 제목)
   - ingredients (text, 재료)
   - instructions (text, 조리법)
   - category (string, nullable, 카테고리)
   - cooking_time (integer, nullable, 조리 시간(분))
   - timestamps
5. Recipe 모델 생성 (fillable 속성 포함)
6. 마이그레이션 실행

모든 파일의 주석은 한글로 작성해주세요.

기대 결과: Laravel 프로젝트가 생성되고, 데이터베이스 마이그레이션이 완료되며, Recipe 모델이 준비됩니다. Tailwind CSS가 설정되어 사용 가능한 상태가 됩니다.

2
Step 2
레시피 CRUD를 처리할 RecipeController를 생성하고 라우트를 설정해주세요.

요구사항:
1. RecipeController 생성 (resource controller)
2. web.php에 라우트 등록:
   - GET / : 레시피 목록 및 추가 폼 표시 (index)
   - POST /recipes : 레시피 저장 (store)
   - DELETE /recipes/{id} : 레시피 삭제 (destroy)
3. index 메서드: 모든 레시피를 최신순으로 조회하여 뷰로 전달
4. store 메서드: 
   - 유효성 검사 (title, ingredients, instructions 필수)
   - 데이터 저장 후 성공 메시지와 함께 리다이렉트
5. destroy 메서드: 레시피 삭제 후 리다이렉트

한글 주석으로 각 메서드의 역할을 설명해주세요.

기대 결과: RecipeController가 생성되고, 레시피 추가/조회/삭제 기능이 구현됩니다. 라우트가 설정되어 각 URL로 접근 가능합니다.

3
Step 3
Blade 템플릿을 사용하여 메인 페이지를 만들어주세요.

요구사항:
1. resources/views/recipes/index.blade.php 생성
2. Tailwind CSS를 사용한 깔끔한 디자인
3. 페이지 구성:
   - 상단: 페이지 제목 "나만의 레시피 카드 컬렉션" (큰 폰트, 중앙 정렬)
   - 왼쪽 영역: 레시피 추가 폼
     * 제목 입력 필드
     * 재료 입력 필드 (textarea, placeholder: "재료를 쉼표로 구분하여 입력하세요")
     * 조리법 입력 필드 (textarea)
     * 카테고리 선택 (select: 한식, 양식, 중식, 일식, 기타)
     * 조리 시간 입력 (숫자, 단위: 분)
     * 제출 버튼 ("레시피 추가")
   - 오른쪽 영역: 레시피 카드 목록 (그리드 레이아웃)
4. 레시피 카드 디자인:
   - 흰색 배경, 그림자 효과, 둥근 모서리
   - 카드 상단: 제목 (굵게)
   - 카테고리 배지 (색상 구분)
   - 재료 목록 (쉼표로 구분된 텍스트를 리스트로 변환)
   - 조리법 (줄바꿈 유지)
   - 조리 시간 표시 (아이콘과 함께)
   - 삭제 버튼 (빨간색, 카드 우측 상단)
5. 레시피가 없을 때: "아직 등록된 레시피가 없습니다. 첫 레시피를 추가해보세요!" 메시지 표시
6. 반응형 디자인: 모바일에서는 폼과 카드가 세로로 배치
7. 성공/에러 메시지 표시 영역 (세션 메시지)

CSRF 토큰을 포함하고, 폼 메서드는 POST, 삭제는 DELETE 메서드를 사용해주세요.

기대 결과: 완성된 웹 페이지가 표시됩니다. 레시피 추가 폼과 카드 목록이 보기 좋게 배치되며, 반응형으로 동작합니다. 레시피를 추가하면 카드로 표시되고, 삭제 버튼으로 제거할 수 있습니다.

제출된 작품 (1)

로그인 후 제출

나만의 레시피 카드 컬렉션

리자
리자
1주 전 · Claude Code

개인 맞춤형 요리 레시피를 카드 형태로 수집하고 관리할 수 있는 웹 애플리케이션

조회수 41 댓글수 0 추천수 0

댓글 (0)

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