munifico / mad-salad

Week3: 💸 소비의 시각화, 금융의 직관화. 금융 어플리케이션

가계부/금융 앱

사용자의 소비 내역을 시각화, 직관화해주는 가계부/금융 어플리케이션.

이 프로젝트는 1주일 동안 https://bank.woowahan.dev/ 웹사이트의 디자인과 기획을 참고하여 개발했습니다.
Vue로 개발된 프로젝트를 React, TypeScript로 개발했습니다.

Motivation

저희 팀은 금융, 가게부 웹을 만들어보고 싶었고 다양한 레퍼런스를 찾던 도중 위의 웹사이트를 찾게되어 디자인과, 기획을 거의 똑같이 참고하여 개발했습니다.

하지만 프레임워크가 달랐기 때문에 단순한 helper function을 제외한 모든 생명주기, 비동기 코드는 직접 custom하여 개발했습니다.
추가적으로 송금 기능을 구현하기 위해 팀원들끼리 회의를 거쳐 transaction 스키마를 추가하였습니다.

저희가 작성한 코드를 쉽게 볼 수 있도록 오픈소스로 deploy합니다.

TOC

0. Team
1. Sign up
2. History Tab
3. Calendar Tab
4. Analytics Tab
5. Transaction Tab
6. REST API

Team

Front-end

• 정이든 (Sign up, History 탭, Analytics 탭, Transaction 탭)
• 김경하 (Calendar 탭, Transaction 탭)

Back-end

• 박종회 (Server, REST API, Server Deployment on Heroku)

Client side(Web)

Sign up

• 이메일과 비밀번호로 회원가입 가능.
• 이메일과 비밀번호 validation check 구현.

History Tab

• 사용자의 거래 내역을 월별로 모두 모아 보여줌.
• 지출과 수입 유형을 구분하여 따로 모아 볼 수 있음.
• 거래 내역을 추가할 수 있음.

Calendar Tab

• 사용자의 거래 내역을 날짜별로 분류하여 달력에 나타내줌.
• 월별 총 지출 및 수입 금액 확인 가능.
• 수입은 파란색으로, 지출은 빨간색으로 설정하여 유형을 분류함.
• 각 거래 내역을 클릭하면 상세내역(날짜, 카테고리, 지불 유형, 제목, 금액) 확인 및 수정 가능.
• 지불 방법 선택시 선택된 카드에 floating 애니메이션 적용
• Add History 버튼을 통해 거래 내역을 추가할 수 있음.

Analytics Tab

• By Categoreis: 사용자의 소비를 파이 그래프와 막대 그래프를 이용해, 카테고리로 나눠 비교 분석함.
• By Dates: 사용자의 소비를 꺽은선 그래프를 이용해, 날짜별로 비교 분석함.

Transaction Tab

• 사용자의 계좌(거래 수단)을 관리함.
• 계좌를 추가하고 제거할 수 있음.
• 사용자가 관리한 계좌를 거래 추가/수정 시 사용할 수 있음.
• 다른 계좌로 송금 가능
• 송금 카테고리, 송금 계좌, 받는 계좌 번호, 송금 내역, 금액을 입력하면 송금됨
• 최대 송금 금액은 보내는 계좌의 잔액에 따라 결정됨
• 송금 날짜는 당일만 가능
• 받는 user에게 송금 transaction이 pending 되어 있다가 해당 user에게 pending 되어있는 transaction이 들어오면 송금을 받겠냐는 alert dialog가 뜨게됨.
• 수락을 누르면 transaction commit, 거절을 누르면 rollback

---

Server

Tech

• Nodejs
• TypeScript
• Express
• Prisma(ORM)

DB schema

PostgreSQL database schema

REST API

Auth

• Login (jwt)
• Change password

User

• Join (Sign up)
• Unroll

Account

• Create Account
• Delete Account
• Get All Accounts

Transaction

• Income
• Expenditure
• Send
• Update transaciton
• Delete Ttransaction
• Show history by month
• Show history by month grouped by history
• Show history by month grouped by created date
• Get pending Transactions which are in the state right before sending and receiving money

Category

• Get all categories
• Get all expenditure categories
• Get all income categories