오늘의 날씨 기분 일기장 - 바이브코딩 레시피
입문 PHP Laravel

오늘의 날씨 기분 일기장

리포지토리명 weather-mood-journal
조회수 30 1건 제출 4일 전

문제 설명

프로젝트 개요

매일의 날씨와 기분을 함께 기록하는 심플한 일기장을 만듭니다. 날씨 아이콘과 기분 이모지를 선택하고, 간단한 메모를 남길 수 있는 Laravel 기반 웹 애플리케이션입니다.

필수 기능

  • 📝 일기 작성 폼 (날짜, 날씨, 기분, 메모)
  • 🌤️ 날씨 선택 (맑음, 흐림, 비, 눈 - 아이콘으로 표시)
  • 😊 기분 선택 (5가지 이모지: 😁, 🙂, 😐, 😔, 😢)
  • 📋 작성한 일기 목록 보기 (최신순 정렬)
  • 🗑️ 일기 삭제 기능
  • 💾 데이터베이스 저장 (SQLite 사용)

선택 추가 기능 (보너스)

  • 📊 기분 통계 보기 (이번 주 가장 많이 느낀 기분)
  • 🎨 날씨별 배경색 변경
  • 🔍 날짜별 검색 기능
  • ✏️ 일기 수정 기능

제약 조건

  • Laravel 12.x 사용 (최신 버전 필수)
  • SQLite 데이터베이스 사용 (설정 간단)
  • Blade 템플릿 엔진 사용
  • Tailwind CSS 사용 (Laravel 기본 설정)
  • 외부 API 호출 금지 (날씨 데이터는 사용자가 직접 선택)
  • JavaScript는 최소한으로 (폼 제출, 삭제 확인 정도만)
  • 인증(로그인) 기능 없음 (단일 사용자 가정)

프롬프트 레시피

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

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

요구사항:
1. 프로젝트명: weather-mood-journal
2. SQLite 데이터베이스 사용 (.env 파일에서 DB_CONNECTION=sqlite 설정)
3. database/database.sqlite 파일 생성
4. Journal 모델과 마이그레이션 파일 생성
   - 테이블명: journals
   - 컬럼: id, date (날짜), weather (날씨, string), mood (기분, string), note (메모, text), created_at, updated_at
5. 마이그레이션 실행
6. Tailwind CSS 설정 (Laravel Breeze 없이 순수 Tailwind만)

프로젝트 구조와 초기 설정 파일들을 모두 생성해주세요.

기대 결과: Laravel 프로젝트가 생성되고, SQLite 데이터베이스가 설정되며, Journal 모델과 테이블이 준비됩니다. Tailwind CSS가 설정되어 스타일링 준비가 완료됩니다.

2
Step 2
JournalController를 생성하고 기본 CRUD 라우트를 설정해주세요.

요구사항:
1. JournalController 생성 (resource 컨트롤러)
2. routes/web.php에 라우트 추가:
   - GET / : 일기 목록 (index)
   - GET /create : 일기 작성 폼 (create)
   - POST /store : 일기 저장 (store)
   - DELETE /{id} : 일기 삭제 (destroy)
3. 컨트롤러 메서드 구현:
   - index(): 모든 일기를 최신순으로 가져와서 뷰에 전달
   - create(): 작성 폼 뷰 반환
   - store(): 폼 데이터 검증 및 저장 (date, weather, mood, note 필드 검증)
   - destroy(): 해당 일기 삭제 후 목록으로 리다이렉트

검증 규칙:
- date: 필수, 날짜 형식
- weather: 필수, 'sunny', 'cloudy', 'rainy', 'snowy' 중 하나
- mood: 필수, 'very-happy', 'happy', 'neutral', 'sad', 'very-sad' 중 하나
- note: 선택, 최대 500자

기대 결과: 컨트롤러와 라우트가 설정되어 일기 작성, 조회, 삭제 기능의 백엔드 로직이 완성됩니다.

3
Step 3
Blade 템플릿 뷰 파일들을 생성해주세요.

요구사항:
1. resources/views/layout.blade.php (메인 레이아웃)
   - HTML 기본 구조
   - Tailwind CSS CDN 포함
   - 헤더: "오늘의 날씨 기분 일기장" 제목
   - 파스텔톤 배경색 (하늘색 그라데이션)
   - @yield('content') 영역

2. resources/views/index.blade.php (일기 목록)
   - "새 일기 쓰기" 버튼 (상단)
   - 일기 카드 목록 (grid 레이아웃, 3열)
   - 각 카드 표시 내용:
     * 날짜 (예: 2024년 1월 15일)
     * 날씨 아이콘 (☀️ 맑음, ☁️ 흐림, 🌧️ 비, ❄️ 눈)
     * 기분 이모지 (😁, 🙂, 😐, 😔, 😢)
     * 메모 내용 (100자까지만 표시)
     * 삭제 버튼 (빨간색, 확인 알림 포함)
   - 일기가 없을 때: "아직 작성한 일기가 없습니다" 메시지

3. resources/views/create.blade.php (일기 작성 폼)
   - 폼 카드 (중앙 정렬, 최대 너비 600px)
   - 날짜 입력 (type="date", 기본값 오늘)
   - 날씨 선택 (라디오 버튼, 아이콘으로 표시)
   - 기분 선택 (라디오 버튼, 이모지로 표시)
   - 메모 입력 (textarea, placeholder: "오늘 하루는 어땠나요?")
   - 저장 버튼 (파란색)
   - 취소 버튼 (회색, 목록으로)
   - 유효성 검사 오류 메시지 표시 영역

모든 요소는 Tailwind CSS로 예쁘게 스타일링하고, 반응형으로 만들어주세요.

기대 결과: 사용자 친화적이고 시각적으로 아름다운 UI가 완성됩니다. 일기 목록과 작성 폼이 모두 작동하며, 날씨 아이콘과 기분 이모지가 직관적으로 표시됩니다.

제출된 작품 (1)

로그인 후 제출

날씨 기분 일기장

리자
리자
3일 전 · Claude Code

오늘의 날씨와 함께 하루의 기분을 기록하고 관리하는 감성 일기 애플리케이션

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

댓글 (0)

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