예산 출납 관리 시스템

본 애플리케이션은 학교 또는 동아리 활동에서 발생하는 예산을 체계적으로 관리하기 위해 설계된 웹 기반 출납 관리 툴입니다. 사용자는 예산 항목(세부사업 → 세부항목 → 원가통계비목 → 산출내역)을 설정하고, 실제 지출이 발생할 때마다 상세 내역을 입력하여 예산 사용 현황을 실시간으로 추적할 수 있습니다. 지출 입력 시 설정된 예산 항목의 잔액이 자동으로 차감되어 예산 초과 여부를 직관적으로 확인할 수 있으며, 모든 기록은 브라우저 로컬 스토리지를 통해 안전하게 저장됩니다.

화면·작동 안내

주요 UI 요소

• 예산 항목 추가 폼: '세부사업', '세부항목', '원가통계비목', '산출내역' 및 '예산 현액'을 입력하여 새로운 예산 분류 코드를 생성하고 초기 예산을 등록하는 영역입니다.
• 예산 현황 테이블: 등록된 모든 예산 항목 목록(세부사업, 산출내역, 예산 현액 등)이 표시되며, 각 항목별로 삭제 버튼을 통해 예산 항목을 관리할 수 있습니다.
• 예산 선택 드롭다운 (캐스케이드): 네 단계(세부사업 → 세부항목 → 원가통계비목 → 산출내역)의 드롭다운 메뉴로 구성되어 있으며, 이전 단계 선택에 따라 다음 단계의 선택지가 동적으로 제한됩니다.
• 선택된 예산 정보 패널: 드롭다운 선택이 완료되면, 선택된 최종 예산 항목명과 해당 예산의 총액 및 남은 잔액이 표시됩니다.
• 지출 내역 입력 폼: 지출 건별 상세 정보를 입력하는 영역입니다. '품의한 날짜', '구매한 날짜', '상세', '단가', '수량' 등을 입력하며, 총액은 단가와 수량에 의해 자동 계산됩니다.
• 예산 필터 (Select): '지출 내역 목록'에서 특정 예산 항목에 해당하는 지출 내역만 모아볼 수 있도록 필터링하는 드롭다운 메뉴입니다.
• 지출 내역 목록: 발생한 모든 지출 건이 목록 형태로 표시됩니다. 각 항목별로 '수정' 버튼을 통해 지출 내역을 편집하고, '삭제' 버튼으로 기록을 제거할 수 있습니다.
• 백업/복원 버튼: '백업하기' 버튼을 눌러 현재 모든 예산 및 지출 내역을 JSON 파일로 다운로드할 수 있으며, '불러오기' 버튼을 통해 이전에 저장한 백업 파일을 불러와 데이터를 복구할 수 있습니다.

사용 흐름

1. 예산 항목 등록: '예산 현황' 섹션에서 예산 항목 4가지(사업, 항목, 비목, 내역)를 입력하고 '예산 현액'을 기입한 뒤 '예산 항목 추가' 버튼을 클릭하여 예산을 설정합니다.
2. 예산 선택 및 확인: '예산 선택' 섹션에서 드롭다운 메뉴를 순서대로 클릭하여 원하는 최종 예산 항목을 선택하고, 하단의 잔액을 확인합니다.
3. 지출 내역 등록: '지출 내역 입력' 폼에 '품의일', '구매일', '상세', '단가', '수량'을 입력하고, 최종 '등록' 버튼을 클릭하여 지출을 확정합니다. 이 과정에서 선택된 예산의 잔액이 차감됩니다.
4. 지출 내역 확인: '지출 내역 목록'에서 등록된 모든 지출 내역을 확인하고, 필요시 예산 필터를 이용하여 특정 예산의 지출 건만 조회할 수 있습니다.
5. 데이터 백업/복구: 모든 작업 완료 후, 우측의 '백업하기' 버튼을 눌러 현재 상태를 파일로 저장하거나, 외부 파일을 통해 '불러오기' 버튼으로 데이터를 복원합니다.

프로젝트 진행 상황

• [x] 예산 항목 추가/수정 및 관리 기능 구현 (프론트 로직)
• [x] 예산 계층형(캐스케이드) 선택 기능 구현
• [x] 지출 내역 등록, 수정, 삭제 기능 및 자동 총액 계산 구현
• [x] 예산 잔액 자동 반영 및 경고 처리 로직 구현
• [x] 지출 내역 목록 표시 및 예산별 필터링 기능 구현
• [x] 데이터 로컬 스토리지 영속화 (저장/불러오기/백업)
• [ ] UI/UX 개선: 반응형 디자인 및 가독성 향상 (완료됨)
• [ ] 초기 예시 데이터 로드 기능 구현