나만의 여행 버킷리스트 - 가고 싶은 곳 지도 핀
travel-bucket-list-map
문제 설명
프로젝트 개요
가고 싶은 여행지를 지도에 핀으로 표시하고 관리하는 버킷리스트 웹 애플리케이션입니다. 사용자는 여행지 이름, 간단한 메모, 우선순위를 입력하면 자동으로 지도에 마커가 표시됩니다.
필수 기능
- 여행지 추가 폼 (장소명, 국가, 메모, 우선순위)
- 추가된 여행지 목록 표시 (테이블 또는 카드 형식)
- 각 여행지별 '방문 완료' 체크 기능
- 방문 완료 시 스타일 변경 (취소선, 색상 변경 등)
- 여행지 삭제 기능
- 전체 통계 표시 (전체 개수, 완료 개수, 남은 개수)
- 데이터베이스 저장 (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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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도 설치되어 스타일링 준비가 완료됩니다.
여행지 목록을 보여주는 메인 페이지를 만들어줘. 요구사항: 1. 라우트: GET / (DestinationController의 index 메서드) 2. Blade 뷰 파일: resources/views/destinations/index.blade.php 3. 페이지 구성: - 상단에 "나만의 여행 버킷리스트" 제목 - 통계 섹션: 전체 여행지 수, 방문 완료 수, 남은 여행지 수 (카드 형식으로 가로 배치) - 새 여행지 추가 버튼 (모달 또는 별도 섹션 토글) - 여행지 목록을 카드 형식으로 표시 (그리드 레이아웃) 4. 각 여행지 카드에 표시할 정보: - 여행지명 (크게) - 국가명 - 메모 (있을 경우) - 우선순위 배지 (색상: 높음-빨강, 중간-노랑, 낮음-초록) - 방문 완료 체크박스 - 삭제 버튼 5. 방문 완료된 여행지는 카드 전체에 반투명 효과 + 여행지명에 취소선 6. Tailwind CSS로 반응형 디자인 (모바일: 1열, 태블릿: 2열, 데스크탑: 3열) 7. 데이터가 없을 때 "아직 추가된 여행지가 없습니다" 메시지 표시 컨트롤러에서 모든 여행지 데이터를 가져와서 뷰로 전달하고, 통계 데이터도 함께 계산해서 전달해줘.
기대 결과: 메인 페이지가 생성되어 여행지 목록이 카드 형식으로 표시됩니다. 통계 정보가 상단에 표시되고, 방문 완료 여부에 따라 스타일이 다르게 적용됩니다. 반응형 디자인으로 모바일에서도 잘 보입니다.
여행지 추가, 방문 완료 토글, 삭제 기능을 구현해줘.
요구사항:
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)
로그인 후 제출나만의 여행 버킷리스트 지도
가고 싶은 여행지를 지도에 핀으로 표시하고 관리할 수 있는 인터랙티브 버킷리스트 웹 애플리케이션