주요 기능 소개
- OAuth를 이용한 사용자 로그인 페이지
-
GitHub OAuth를 이용한 로그인 기능입니다.
-
라이브러리 없이 직접 구현했으며, GitHub에 url을 요청하고 token을 수령하여 인증을 진행합니다.
-
인증이 완료된 회원은 jwt가 쿠키에 저장되며(http only) 이후의 페이지 인증과정은 jwt로 진행하게 됩니다.
- 사용자가 지정한 기간의 지출과 수입 내역을
분석하여 알려줍니다.
- 많은 지출을 기록한 상위 5개 카테고리의 파이차트를 확인할 수 있습니다.
- 전체보기를 클릭하면, 수입과 지출에 따른 전체 카테고리별 통계를 확인할 수 있습니다.
- 사용자가 지정한 기간에서 일자별 지출 추이를 라인 그래프로 확인할 수 있습니다.
- 거래내역을 확인할 수 있는 페이지 입니다.
- 거래내역을 확인할 수 있습니다.
- 필터에 맞는 거래내역을 보여주는 페이지 입니다.
- 총 수입, 지출을 확인할 수 있습니다.
- 필터에 맞는 거래내역의 총 수입, 지출을 계산에서 상단바에서 확인할 수 있습니다.
- 원하는 거래내역을 볼 수 있는 필터링 기능을 제공합니다.
- 기간 / 결제수단 / 지출 / 수입 / 미분류 필터링을 제공합니다.
- 깔끔한 UI/UX로 사용자가 쉽게 카테고리를 설정할 수 있습니다.
- 거래내역 생성 / 수정 / 삭제 기능을 제공합니다.
- 항목을 작성하고 저장버튼을 통해 생성 / 수정할 수 있습니다.
- 휴지통 아이콘을 통해 거래내역 삭제를 할 수 있습니다.
- 거래내역을 달력 형태로 확인할 수 있는 페이지 입니다.
- 달력 형태로 거래내역을 확인할 수 있습니다.
- 상단 시작일, 마지막일 항목으로 선택한 기간에 해당하는 거래내역을 볼 수 있습니다.
- 올해에 해당하는 달은 월만 (ex. 12) 다른 해에 해당하는 달은 앞에 연도를 붙여 표기합니다 (ex. 21 / 12)
- 달력 시작 요일을 설정할 수 있습니다 (ex. 일/월)
- 시작 요일에 맞는 달력을 보여줍니다.
- 설정한 정보는 다음 번 재접속시에도 유지됩니다.
- 거래내역이 있는 날짜를 클릭하면 해당 날짜의 거래내역을 확인할 수 있습니다.
- 거래내역을 클릭하면 해당 거래내역 수정 페이지로 이동합니다.
- 사용자가 가계부와 채팅을 할 수 있는 페이지 입니다.
-
사용자의 메세지가 화면에 표시됩니다.
-
가계부와 계약된 은행에서 보낸 문자로 판별할 경우 사용처를 물어보는 메세지를 보내줍니다.
-
돌아오는 답변을 기준으로 거래내역을 생성하고 가계부에 적용합니다.
- 자신이 속해 있는 여러 가계부 중에서 선택할 수 있습니다.
- 새로운 가계부를 만들 수 있습니다.
- 가계부의 이름을 변경할 수 있습니다.
- 친구를 초대하여 공용으로 가계부를 관리할 수 있습니다.
- 자신이 가계부의 주인이라면, 가계부를 삭제할 수 있습니다.
로그인 후 아직 수락/거절을 하지 않는 가계부 초대 목록을 확인 할 수 있는 모달입니다.
상단 헤더 오른쪽에 배치가 되어 있으며, 클릭 했을 때 현재 화면의 중앙에 나타나는 모달입니다.
- 현재 로그인 사용자가 초대받은 목록을 보여줍니다.
- 목록 내용은
초대한사람 닉네임,초대받은 가계부로 표현이 됩니다. - 하단에는 각 초대에 따른
수락/거절을 할 수 있는 버튼이 있습니다.
- 현재 가계부에 등록된 카테고리(수입/지출), 거래수단을 관리 할 수있는 페이지입니다.
- 카테고리 같은 경우 이름과 색상, 거래수단 같은 경우 이름을 변경 할 수 있습니다.
- 필요 따라서 원하는 항목을 생성/삭제를 할 수 있습니다
- 카테고리(지출), 카테고리(수입), 결제수단을 탭으로 구분하여 조회 할 수 있습니다.
-
color를 눌렀을 때 항목에 사용될 색상을 고를 수 있습니다.
-
목록 오른쪽 상단에 보면
수정/삭제을 활성화 할 수 있는 버튼이 있습니다. -
수정. 수정 버튼을 클릭 했을 때, 항목에 해당하는 색상과 내용이 채워진 모달이 생겨납니다.
-
삭제. 삭제 버튼을 클릭 했을 때, 아래와 같이 입력 모달을 띄우고
확인을 눌렀을 때 삭제가 됩니다. -
수정 또한,
미분류는 예약이 되어있는 태그로 입력이 불가합니다.
