-
Notifications
You must be signed in to change notification settings - Fork 1
프로젝트 기능 소개
Changhee Choi edited this page Dec 20, 2020
·
6 revisions
- OAuth 로그인 기능을 제공합니다.
- 추가적인 로그인 서비스 확장이 용이하도록 OAuth 인증 과정을 모듈화 하였습니다.
- 로그인 성공시 JWT와 Http Cookie를 이용해 인증 정보를 저장합니다.
- 로그아웃시 Cookie를 만료시켜 인증 정보를 삭제합니다.
- 현재 월의 총 소비,수입을 계산하여 보여줍니다.
-
평균 월 수입과 이번 달의 지출의 비율을 계산하여 소비 습관에 대한 메세지를 출력합니다.
- 1 이상 : 재정적으로 매우 위험한 상태
- 0.7~1 미만 : 과소비 상태
- 0.5~0.7 미만 : 수입과 지출의 비중이 적정한 상태
- 0.5 미만 : 근검절약을 실천하는 훌륭한 상태
- 0 : 소비가 없어 측정할 수 없는 상태
- 현재 월의 최근 3개 내역을 보여줍니다.
- 자세히 보기 클릭 시 달력 페이지로 이동됩니다.
- 직전 3개월동안 고정적으로 같은 날짜, 같은 명칭 의 가계부 내역이 등록될 경우 고정 지출로 집계가 됩니다.
- 이번달에 같은 날짜, 같은 명칭 으로 가계부 내역이 등록될 경우 완료됨 상태로 집계가 됩니다.
- 예정된 금액은 3개월간의 평균 금액으로 계산됩니다.
- 현재 월에서 가장 소비가 많은 카테고리와 날짜에 대한 정보를 보여줍니다.
- 현재 월의 가계부 내역을 일별로 그룹화 하여 보여줍니다.
- 달력 UI에서는 일자별 총 수입/소비 정보를 확인할 수 있으며, 리스트 UI에서는 각 일자별 가계부 내역을 확인할 수 있습니다.
- 연필 버튼을 누르면 가계부 내역을 수정할 수 있는 Modal이 활성화 됩니다.
- 리스트 출력에는 렌더링 성능을 향상시키기 위해 Lazy Rendering 기법이 적용되었습니다.
- 달력에서 특정 일을 선택하면 해당 날짜의 가계부 내역만 확인할 수 있습니다.
- 다시 클릭하면 전체 리스트로 전환 됩니다.
- 대시보드, 달력페이지 의 우측 하단 플로팅 버튼 을 통해 등록 모달을 활성화 시킬 수 있습니다.
- 모든 항목을 입력하면 저장 버튼이 활성화 됩니다.
-
복사 버튼을 누르면 클립보드의 내용을 불러와 가계부 내역으로 파싱하고 각 항목에 입력해 줍니다.
-
취소, 입금 같은 경우 수입으로 파싱되고 승인, 출금 의 경우 지출로 파싱됩니다.
-
가계부 내역으로 파싱할 수 없는 경우 금액이 0으로 설정되고, 상세내용 항목에 클립보드 내용을 붙여넣는 동작만 진행됩니다.
- 달력 페이지에서 연필 버튼을 눌러 활성화 시킬 수 있습니다.
- 고정 지출로 집계된 항목중 지출이 완료된 내역과 예정인 내역을 분리하여 확인할 수 있습니다.
- ❗️현재 고정지출 집계는 중복 집계를 방지하기 위해 마지막 집계 날짜를 비교하여 집계가 진행 됩니다. 따라서 데모 데이터 상에서 12월 외에는 집계가 되지 않는 것처럼 보일 수 있습니다.
- 상단의 + 버튼을 누르면 새로운 결제수단을 등록할 수 있습니다.
- 결제 수단의 연필 버튼을 누르면 이름을 수정할 수 있습니다.
- 결제 수단의 - 버튼을 누르면 삭제할 수 있습니다.
- 결제 수단을 삭제시 soft delete 처리하여 이전에 등록된 가계부 내역은 유지됩니다.
- 상단의 + 버튼을 누르면 새로운 카테고리를 등록할 수 있습니다.
- 지출/수입 탭을 통해 타입 별 카테고리를 등록할 수 있습니다.
- 카테고리의 연필 버튼을 누르면 이름을 수정할 수 있습니다.
- 카테고리의 - 버튼을 누르면 삭제할 수 있습니다.
- 카테고리를 삭제시 soft delete 처리하여 이전에 등록된 가계부 내역은 유지됩니다.
- 지출/수입 탭을 통해 타입 별 카테고리를 수정/삭제 할 수 있습니다.
-
카테고리별 지출/수입을 집계하고 파이 그래프로 확인 할 수 있습니다.
-
하단에는 카테고리별 집계 금액과 리스트를 확인할 수 있습니다.
-
우측의 화살표 버튼을 누르면 상세 리스트를 확인할 수 있습니다.
- 현재 월의 일자별 수입/지출 집계를 꺾은선 그래프로 확인할 수 있습니다.
- 그래프에 마우스를 올리면 상세 금액을 확인할 수 있습니다.