간단한 가계부 - 수입/지출 한눈에 보기
simple-expense-tracker
문제 설명
프로젝트 개요
매일의 수입과 지출을 기록하고, 한 달 동안의 재정 상태를 한눈에 확인할 수 있는 간단한 가계부 웹 애플리케이션을 만듭니다.
필수 기능
- 거래 내역 추가: 날짜, 카테고리(식비/교통비/쇼핑/수입 등), 금액, 메모를 입력하여 거래 기록
- 수입/지출 구분: 라디오 버튼이나 선택 옵션으로 수입과 지출을 구분
- 거래 내역 목록: 등록한 모든 거래를 날짜순으로 표시 (최신순)
- 잔액 요약: 상단에 총 수입, 총 지출, 현재 잔액을 실시간으로 계산하여 표시
- 거래 삭제: 각 거래 항목에 삭제 버튼을 추가하여 잘못 입력한 내역 제거 가능
- 카테고리별 색상: 카테고리에 따라 다른 색상으로 구분 (예: 식비-주황, 교통비-파랑, 수입-초록)
보너스 기능 (선택)
- 이번 달 거래만 필터링하는 기능
- 카테고리별 지출 비율을 간단한 텍스트로 표시
- 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에게 보내면 됩니다. 복사 버튼을 눌러 바로 사용하세요.
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가 포함된 기본 레이아웃 파일이 준비됩니다.
가계부 메인 페이지와 거래 내역 추가 폼을 만들어주세요.
요구사항:
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 페이지로 리다이렉트 (성공 메시지 포함)
모든 코드를 제공해주세요. 금액은 원화(₩) 기호와 함께 천 단위 콤마로 표시해주세요.
기대 결과: 메인 페이지에 상단 요약 카드(수입/지출/잔액)와 거래 추가 폼이 표시됩니다. 폼을 작성하여 제출하면 데이터베이스에 저장되고 페이지가 새로고침됩니다. 아직 거래 내역 목록은 표시되지 않습니다.
거래 내역 목록 표시와 삭제 기능을 추가해주세요.
요구사항:
1. index.blade.php에 거래 내역 목록 섹션 추가
- 거래가 없을 때: "아직 등록된 거래가 없습니다" 메시지 표시
- 거래가 있을 때: 각 거래를 카드 형태로 표시
* 날짜 (좌측 상단, 회색)
* 카테고리 배지 (색상으로 구분)
- 식비: 주황색
- 교통비: 파란색
- 쇼핑: 분홍색
- 문화생활: 보라색
- 의료: 빨간색
- 월급: 초록색
- 용돈: 연두색
- 기타: 회색
* 수입/지출 표시 (배지)
* 금액 (크고 굵게, 수입은 초록색 +표시, 지출은 빨간색 -표시)
* 메모 (있는 경우만 표시, 작은 글씨)
* 삭제 버튼 (우측 상단, 빨간색 작은 버튼)
2. 삭제 버튼에 JavaScript 확인 다이얼로그 추가
- "정말 삭제하시겠습니까?" 확인 후 진행
3. TransactionController의 destroy 메서드 구현
- 해당 거래 삭제
- 삭제 후 index 페이지로 리다이렉트 (성공 메시지)
4. 성공/오류 메시지를 표시하는 flash 메시지 컴포넌트 추가
- layouts/app.blade.php에 @if(session('success')) 블록 추가
- Tailwind로 예쁘게 스타일링 (초록색 배경, 자동으로 사라지는 효과)
모든 코드를 제공해주세요. 목록은 최신순으로 정렬되어야 하고, 반응형 디자인이 적용되어야 합니다.
기대 결과: 거래 내역이 카드 형태로 목록에 표시됩니다. 각 카드는 카테고리별 색상으로 구분되고, 수입은 초록색, 지출은 빨간색으로 표시됩니다. 삭제 버튼을 클릭하면 확인 후 해당 거래가 삭제되고, 상단 요약 금액도 자동으로 업데이트됩니다. 화면 상단에 성공/오류 메시지가 표시됩니다.