mu-aa / acnt

📊 [Team Project] 가계부 사이트

ITWILL 교육과정 팀 프로젝트

• 팀명 : acnt
• 인원/직책 : 4명/팀장
• 개발기간 : 2023.01.30 ~ 2023.03.16
• 주제 : 가계부 사이트, 네이버 가계부 레퍼런스
• 링크 : http://itwill.xyz/acnt
• 담당 업무)
  • 수입, 지출, 예산에 대한 값 CRUD 처리
  • 저장된 수입, 지출, 예산 DB값을 반영한 그래프를 chart.js 라이브러리를 이용해 제작
  • 수입, 지출, 예산 값에 따른 그래프 계산 식 작성
  • 전체 페이지 css
  • Exception Handler를 사용한 예외 처리

화면정의서

• 로그인/회원가입

  • 로그인 페이지 - interceptor를 이용해 비회원이 페이지에 접근 시 로그인 페이지로 이동
  • 회원가입 페이지 - 가입 버튼 클릭 시 형식에 맞지 않는 입력값 경고문구 출력

• 지출(메인 페이지)

  • 사이드 메뉴, 출력 그래프, 값 입력표, 열 추가 및 삭제 버튼, 저장 버튼으로 구성
  • 날짜, 출금계좌명, 분류는 option창에서 선택 / 현금, 카드, 메모는 직접 입력
  • 열 추가 버튼 클릭 시 열 추가 생성
  • 선택 항목 삭제(열 삭제) 버튼 클릭 시 선택 열 삭제, 상단 체크박스로 전체 선택
  • 값 입력
  • 값 입력 후 저장 버튼 클릭 시 DB에 저장, 해당 값만큼의 그래프 출력

• 수입

  • 날짜, 출금계좌명, 분류는 option창에서 선택 / 현금, 카드, 메모는 직접 입력
  • 값 입력 후 저장 버튼 클릭 시 DB에 저장

• 달력

  • 해당 날짜의 지출, 수입을 출력
  • 클릭 시 수입/지출 내역 상세 팝업창 출력

• 예산

  • 원하는 항목의 예산 직접 입력 가능
  • 값 입력 후 저장 버튼 클릭 시 DB에 저장
  • 지출 페이지에 계산값에 맞는 그래프 출력
  • 지출이 예산 초과 시 붉은 그래프, 미초과시 초록 그래프, 예산에서 지출 차감값 회색 그래프

느낀점

• 처음으로 Java에 내장되지 않은 라이브러리(chart.js)를 활용한 프로젝트를 진행했습니다. 값 전달 오류, 라이브러리 함수 검색 등 많은 시행착오를 겪으며 어떤 방식으로 라이브러리를 활용해야 하는지 경험했습니다.
• 중간에 팀원 두 명이 학원을 그만두어 6인에서 4인으로 인원이 줄어 많은 기능을 혼자 담당해야 했습니다. 하지만 덕분에 촉박한 일정 속에서도 일정을 관리하는 방법을 터득했습니다.