나만의 여행 버킷리스트 - 가고 싶은 곳 지도 핀 - 바이브코딩 레시피
입문 PHP Laravel

나만의 여행 버킷리스트 - 가고 싶은 곳 지도 핀

리포지토리명 travel-bucket-list-map
조회수 5 1건 제출 23시간 전

문제 설명

프로젝트 개요

가고 싶은 여행지를 지도에 핀으로 표시하고 관리하는 버킷리스트 웹 애플리케이션입니다. 사용자는 여행지 이름, 간단한 메모, 우선순위를 입력하면 자동으로 지도에 마커가 표시됩니다.

필수 기능

  • 여행지 추가 폼 (장소명, 국가, 메모, 우선순위)
  • 추가된 여행지 목록 표시 (테이블 또는 카드 형식)
  • 각 여행지별 '방문 완료' 체크 기능
  • 방문 완료 시 스타일 변경 (취소선, 색상 변경 등)
  • 여행지 삭제 기능
  • 전체 통계 표시 (전체 개수, 완료 개수, 남은 개수)
  • 데이터베이스 저장 (Laravel + MySQL)

선택 추가 기능 (보너스)

  • 우선순위별 필터링 (높음/중간/낮음)
  • 대륙별 그룹화 표시
  • 간단한 지도 이미지에 핀 표시 (정적 이미지도 가능)
  • 반응형 디자인 (모바일 친화적)
  • 추가 날짜 자동 기록

기술 스택

  • Backend: Laravel 12.x
  • Frontend: Blade 템플릿 + Tailwind CSS
  • Database: MySQL
  • JavaScript: Vanilla JS (간단한 인터랙션용)

제약 조건

  • Laravel 12.x 최신 버전 사용 필수
  • 데이터베이스는 MySQL 사용
  • 프론트엔드는 Blade 템플릿 엔진 사용 (별도 React/Vue 없이)
  • Tailwind CSS로 스타일링
  • 복잡한 API 연동 금지 (Google Maps API 등 선택사항)
  • 사용자 인증 기능은 제외 (단일 사용자 가정)
  • CRUD 기능 모두 포함 (Create, Read, Update, Delete)
  • 페이지네이션은 선택사항

프롬프트 레시피

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

1
Step 1
Laravel 12.x 프로젝트로 여행 버킷리스트 애플리케이션을 만들어줘.

요구사항:
1. 프로젝트명: TravelBucketList
2. MySQL 데이터베이스 연결 설정 (.env 파일 예시 포함)
3. 'destinations' 테이블 생성 (마이그레이션 파일):
   - id (primary key)
   - name (여행지명, string, 필수)
   - country (국가명, string, 필수)
   - memo (메모, text, nullable)
   - priority (우선순위, enum: 'high', 'medium', 'low', 기본값 'medium')
   - is_visited (방문 완료 여부, boolean, 기본값 false)
   - timestamps (created_at, updated_at)
4. Destination 모델 생성 (fillable 속성 포함)
5. DestinationController 생성 (resourceful controller)
6. 라우트 설정 (web.php에 resource 라우트 등록)
7. Tailwind CSS 설치 및 설정

초기 설정이 완료되면 마이그레이션 실행 명령어와 서버 실행 방법도 알려줘.

기대 결과: Laravel 프로젝트 기본 구조가 생성되고, 데이터베이스 마이그레이션 파일, 모델, 컨트롤러, 라우트가 설정됩니다. Tailwind CSS도 설치되어 스타일링 준비가 완료됩니다.

2
Step 2
여행지 목록을 보여주는 메인 페이지를 만들어줘.

요구사항:
1. 라우트: GET / (DestinationController의 index 메서드)
2. Blade 뷰 파일: resources/views/destinations/index.blade.php
3. 페이지 구성:
   - 상단에 "나만의 여행 버킷리스트" 제목
   - 통계 섹션: 전체 여행지 수, 방문 완료 수, 남은 여행지 수 (카드 형식으로 가로 배치)
   - 새 여행지 추가 버튼 (모달 또는 별도 섹션 토글)
   - 여행지 목록을 카드 형식으로 표시 (그리드 레이아웃)
4. 각 여행지 카드에 표시할 정보:
   - 여행지명 (크게)
   - 국가명
   - 메모 (있을 경우)
   - 우선순위 배지 (색상: 높음-빨강, 중간-노랑, 낮음-초록)
   - 방문 완료 체크박스
   - 삭제 버튼
5. 방문 완료된 여행지는 카드 전체에 반투명 효과 + 여행지명에 취소선
6. Tailwind CSS로 반응형 디자인 (모바일: 1열, 태블릿: 2열, 데스크탑: 3열)
7. 데이터가 없을 때 "아직 추가된 여행지가 없습니다" 메시지 표시

컨트롤러에서 모든 여행지 데이터를 가져와서 뷰로 전달하고, 통계 데이터도 함께 계산해서 전달해줘.

기대 결과: 메인 페이지가 생성되어 여행지 목록이 카드 형식으로 표시됩니다. 통계 정보가 상단에 표시되고, 방문 완료 여부에 따라 스타일이 다르게 적용됩니다. 반응형 디자인으로 모바일에서도 잘 보입니다.

3
Step 3
여행지 추가, 방문 완료 토글, 삭제 기능을 구현해줘.

요구사항:
1. 여행지 추가 기능:
   - 메인 페이지 상단에 "+ 새 여행지 추가" 버튼 클릭 시 폼 섹션이 나타남 (JavaScript로 토글)
   - 폼 필드: 여행지명(필수), 국가명(필수), 메모(선택), 우선순위(select - 높음/중간/낮음)
   - POST /destinations 라우트로 데이터 전송
   - DestinationController의 store 메서드에서 유효성 검사 및 저장
   - 저장 후 메인 페이지로 리다이렉트 + 성공 메시지

2. 방문 완료 토글 기능:
   - 각 카드의 체크박스 클릭 시 AJAX로 is_visited 상태 변경
   - PATCH /destinations/{id}/toggle 라우트 생성
   - DestinationController에 toggle 메서드 추가
   - 페이지 새로고침 없이 카드 스타일 즉시 변경 (JavaScript)

3. 삭제 기능:
   - 각 카드의 삭제 버튼 클릭 시 확인 대화상자 표시
   - DELETE /destinations/{id} 라우트로 전송
   - DestinationController의 destroy 메서드에서 삭제 처리
   - 삭제 후 메인 페이지로 리다이렉트 + 성공 메시지

4. 성공/에러 메시지 표시:
   - 세션 플래시 메시지 사용
   - 페이지 상단에 알림 표시 (Tailwind CSS alert 스타일)

5. JavaScript 파일 (public/js/app.js 또는 Blade 내 script 태그):
   - 폼 토글 기능
   - 체크박스 AJAX 처리
   - 삭제 확인 대화상자

모든 기능이 정상 작동하도록 라우트, 컨트롤러, 뷰, JavaScript 코드를 완성해줘.

기대 결과: 여행지를 추가, 방문 완료 표시, 삭제할 수 있는 모든 기능이 작동합니다. 폼은 토글되어 나타나고, 체크박스는 AJAX로 즉시 반영되며, 삭제 시 확인 메시지가 표시됩니다. 성공/에러 메시지도 적절히 표시됩니다.

제출된 작품 (1)

로그인 후 제출

나만의 여행 버킷리스트 지도

리자
리자
18시간 전 · Claude Code

가고 싶은 여행지를 지도에 핀으로 표시하고 관리할 수 있는 인터랙티브 버킷리스트 웹 애플리케이션

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

댓글 (0)

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