간단한 가계부 - 수입/지출 한눈에 보기 - 바이브코딩 레시피
입문 PHP Laravel

간단한 가계부 - 수입/지출 한눈에 보기

리포지토리명 simple-expense-tracker
조회수 29 2건 제출 2일 전

문제 설명

프로젝트 개요

매일의 수입과 지출을 기록하고, 한 달 동안의 재정 상태를 한눈에 확인할 수 있는 간단한 가계부 웹 애플리케이션을 만듭니다.

필수 기능

  • 거래 내역 추가: 날짜, 카테고리(식비/교통비/쇼핑/수입 등), 금액, 메모를 입력하여 거래 기록
  • 수입/지출 구분: 라디오 버튼이나 선택 옵션으로 수입과 지출을 구분
  • 거래 내역 목록: 등록한 모든 거래를 날짜순으로 표시 (최신순)
  • 잔액 요약: 상단에 총 수입, 총 지출, 현재 잔액을 실시간으로 계산하여 표시
  • 거래 삭제: 각 거래 항목에 삭제 버튼을 추가하여 잘못 입력한 내역 제거 가능
  • 카테고리별 색상: 카테고리에 따라 다른 색상으로 구분 (예: 식비-주황, 교통비-파랑, 수입-초록)

보너스 기능 (선택)

  • 이번 달 거래만 필터링하는 기능
  • 카테고리별 지출 비율을 간단한 텍스트로 표시
  • LocalStorage를 사용하여 새로고침 후에도 데이터 유지

기술 스택

  • 백엔드: Laravel 12.x (PHP 8.3+)
  • 프론트엔드: Blade 템플릿, Tailwind CSS
  • 데이터베이스: SQLite (간단한 설정)
  • 추가 라이브러리: Alpine.js (선택적, 간단한 인터랙션용)

이 프로젝트는 Laravel의 기본 CRUD 기능을 배우기에 완벽한 입문 과제입니다. 데이터베이스 마이그레이션, 모델, 컨트롤러, 뷰의 기본 흐름을 이해할 수 있습니다.

제약 조건

  • Laravel 12.x 최신 버전 사용 필수
  • PHP 8.3 이상 사용
  • SQLite 데이터베이스 사용 (MySQL/PostgreSQL 설정 불필요)
  • Blade 템플릿 엔진 사용
  • Tailwind CSS로 스타일링 (CDN 사용 가능)
  • 인증(로그인) 기능은 구현하지 않음 (단일 사용자 가정)
  • 복잡한 차트 라이브러리 사용 금지 (텍스트 기반 요약만)
  • API 엔드포인트 불필요 (전통적인 서버 렌더링 방식)
  • JavaScript는 삭제 확인 등 최소한의 인터랙션에만 사용

프롬프트 레시피

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

1
Step 1
Laravel 12.x를 사용하여 간단한 가계부 애플리케이션의 기본 구조를 만들어주세요.

요구사항:
1. 프로젝트명: simple-expense-tracker
2. 데이터베이스: SQLite 사용 (.env 파일에서 DB_CONNECTION=sqlite 설정)
3. Transaction 모델과 마이그레이션 생성
   - 필드: id, type (enum: 'income', 'expense'), category (string), amount (decimal:10,2), description (text, nullable), transaction_date (date), created_at, updated_at
   - type은 'income'(수입) 또는 'expense'(지출)만 허용
   - category 예시: '식비', '교통비', '쇼핑', '월급', '용돈' 등
4. TransactionController 생성 (resource controller)
5. 라우트 설정: Route::resource('transactions', TransactionController::class)
6. 기본 레이아웃 Blade 템플릿 생성 (resources/views/layouts/app.blade.php)
   - Tailwind CSS CDN 포함
   - 심플하고 깔끔한 헤더 ('💰 나의 가계부' 제목)
7. 마이그레이션 실행하여 데이터베이스 테이블 생성

모든 파일의 전체 코드를 제공해주세요.

기대 결과: Laravel 프로젝트 기본 구조가 생성되고, Transaction 모델, 마이그레이션, 컨트롤러가 만들어집니다. SQLite 데이터베이스가 설정되고 transactions 테이블이 생성됩니다. Tailwind CSS가 포함된 기본 레이아웃 파일이 준비됩니다.

2
Step 2
가계부 메인 페이지와 거래 내역 추가 폼을 만들어주세요.

요구사항:
1. TransactionController의 index 메서드 구현
   - 모든 거래 내역을 최신순으로 조회 (transaction_date, created_at 기준)
   - 총 수입, 총 지출, 잔액 계산하여 뷰에 전달
2. resources/views/transactions/index.blade.php 생성
   - 레이아웃: layouts.app 확장
   - 상단에 요약 카드 3개 (총 수입/총 지출/잔액) - Tailwind로 예쁘게 스타일링
     * 총 수입: 초록색 배경
     * 총 지출: 빨간색 배경
     * 잔액: 파란색 배경 (잔액이 마이너스면 빨간색)
   - 거래 추가 폼 (카드 형태)
     * 거래 유형 선택: 라디오 버튼 (수입/지출)
     * 카테고리: 드롭다운 선택 (식비, 교통비, 쇼핑, 문화생활, 의료, 월급, 용돈, 기타)
     * 금액: 숫자 입력 (required, min=0)
     * 메모: 텍스트 입력 (선택사항)
     * 날짜: date 타입 input (기본값: 오늘)
     * 저장 버튼: Tailwind로 스타일링
   - 거래 내역 목록 표시 영역 (아직 비어있음, 다음 단계에서 구현)
3. TransactionController의 store 메서드 구현
   - 폼 데이터 유효성 검사 (type, category, amount, transaction_date 필수)
   - Transaction 모델에 데이터 저장
   - 저장 후 index 페이지로 리다이렉트 (성공 메시지 포함)

모든 코드를 제공해주세요. 금액은 원화(₩) 기호와 함께 천 단위 콤마로 표시해주세요.

기대 결과: 메인 페이지에 상단 요약 카드(수입/지출/잔액)와 거래 추가 폼이 표시됩니다. 폼을 작성하여 제출하면 데이터베이스에 저장되고 페이지가 새로고침됩니다. 아직 거래 내역 목록은 표시되지 않습니다.

3
Step 3
거래 내역 목록 표시와 삭제 기능을 추가해주세요.

요구사항:
1. index.blade.php에 거래 내역 목록 섹션 추가
   - 거래가 없을 때: "아직 등록된 거래가 없습니다" 메시지 표시
   - 거래가 있을 때: 각 거래를 카드 형태로 표시
     * 날짜 (좌측 상단, 회색)
     * 카테고리 배지 (색상으로 구분)
       - 식비: 주황색
       - 교통비: 파란색
       - 쇼핑: 분홍색
       - 문화생활: 보라색
       - 의료: 빨간색
       - 월급: 초록색
       - 용돈: 연두색
       - 기타: 회색
     * 수입/지출 표시 (배지)
     * 금액 (크고 굵게, 수입은 초록색 +표시, 지출은 빨간색 -표시)
     * 메모 (있는 경우만 표시, 작은 글씨)
     * 삭제 버튼 (우측 상단, 빨간색 작은 버튼)
2. 삭제 버튼에 JavaScript 확인 다이얼로그 추가
   - "정말 삭제하시겠습니까?" 확인 후 진행
3. TransactionController의 destroy 메서드 구현
   - 해당 거래 삭제
   - 삭제 후 index 페이지로 리다이렉트 (성공 메시지)
4. 성공/오류 메시지를 표시하는 flash 메시지 컴포넌트 추가
   - layouts/app.blade.php에 @if(session('success')) 블록 추가
   - Tailwind로 예쁘게 스타일링 (초록색 배경, 자동으로 사라지는 효과)

모든 코드를 제공해주세요. 목록은 최신순으로 정렬되어야 하고, 반응형 디자인이 적용되어야 합니다.

기대 결과: 거래 내역이 카드 형태로 목록에 표시됩니다. 각 카드는 카테고리별 색상으로 구분되고, 수입은 초록색, 지출은 빨간색으로 표시됩니다. 삭제 버튼을 클릭하면 확인 후 해당 거래가 삭제되고, 상단 요약 금액도 자동으로 업데이트됩니다. 화면 상단에 성공/오류 메시지가 표시됩니다.

제출된 작품 (2)

로그인 후 제출

수입과 지출을 한눈에 파악할 수 있는 심플하고 직관적인 가계부 애플리케이션

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

일상의 수입과 지출을 한눈에 파악할 수 있는 심플하고 직관적인 가계부 애플리케이션

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

댓글 (3)

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

Claude Code 는 Opus 4.6 사용했습니다

GPT-5.4 사용했습니다

codex 의 ui 가 더 나은 느낌이구요. 바이브코딩 개발 속도는 클로드코드가 1.5배 정도 빠른것 같습니다.