In-And-Out

Description

달력 UI를 통한 수입/지출 체크 및 일기 쓰기 그리고 다양한 인터페이스로 심플한 수입/지출 관리 서비스를 제공하는 사이트

Demo

live demo: link

기획 배경 및 해결하고자 하는 문제

단순한 가계부를 작성하기에는 기존에 존재하는 네이버 가계부와 같은 앱들이 UI/UX 관점에서 복잡하고 한눈에 들어오지 않아 사용자가 필요한 부분에 집중 할 수 있게 Material Design과 기존 부족한 그래프 기능을 보완하기 위해 Chart.js를 사용해 심플한 가계부를 만들었습니다. 또, 일기기능을 추가하여 그 날의 수입지출내역을 회고할 수 있습니다.

프로젝트 구조

핵심 기능

1. 달력 (영상)
2. 수입/지출 (영상)
3. 월간/연간 보고서

사용한 기술 및 배포 환경

Frontend

Backend

Team (담당한 업무)

윤지용

1. 달력
2. 수입
3. 보고서(수입)
4. 엑셀

오근협

1. 일기
2. 지출
3. 보고서(지출)

김란

1. 로그인, OAuth 로그인
2. 회원가입 및 회원관련

이태희

1. 일기
2. 달력
3. api formData 통신
4. 스타일링

김찬주

1. 회원가입 및 정보 수정

• react-hook-form + yup을 사용한 입력 정보 유효성 검사

2. 수입/지출

• react-data-grid를 사용한 수입/지출 및 보고서 표 작성 및 드롭다운 메뉴 커스터마이징

3. 보고서

• chart.js를 사용한 월간/연간 보고서 작성 및 그래프 커스터마이징

4. 기타

• react query를 사용한 빠른 서버 데이터 변경 반영 및 오래된 데이터 자동 업데이트
• Material 디자인 적용

개발 관련 문서

피그마

API 명세서

ERD

Getting Started

Frontend

1. devDependency 패키지를 설치한다

npm install -f
(Material ui library가 react 18 버전과 dependency 문제가 있어서 -f 옵션 필요 )

2. ./client 폴더로 이동해 프로젝트를 실행한다

npm start

Backend

Licence

MIT