💸 10WONMOA (10원모아)

10원모아 : 나만의 가계부 서비스

🏠 서비스 주소

10원모아 사이트

프로젝트 소개

현재 많은 가계부 서비스들은 재테크에 관심이 없다면 애플리케이션에서 제공하는 기능을 이해하고 사용하기가 어렵다고 느꼈습니다. 10원모아 서비스는 가계부에 필요한 핵심 서비스를 최소한으로 제공함으로써 복잡한 가계부 서비스를 쉽게 사용할 수 있도록 기획하였습니다.

🛠 기술 스택

🗂 폴더 구조

├── README.md
├── craco.config.js
├── package.json
├── src
│   ├── App.tsx
│   ├── api : 리액트 쿼리,axios
│   ├── assets : 이미지
│   ├── components : 공통 컴포넌트
│   ├── constants : 상수
│   ├── hooks : 커스텀 훅
│   ├── index.tsx
│   ├── mocks : msw 모킹 핸들러
│   ├── pages : 페이지 컴포넌트
│   ├── router : 라우터
│   ├── styles : css 관련
│   ├── types : type, interface
│   └── utils : 유틸 함수들
├── tsconfig.json
├── tsconfig.paths.json
└── yarn.lock

📖 DOCS

기능

📅 개발 일정 (7/22 ~ 8/16)

Flow 1 (7/22 ~ 8/3)

로그인 페이지
회원가입 페이지
수입/지출 등록 페이지
가계부(일일) 페이지
예산 페이지

Flow 2 (8/4 ~ 8/9 )

공통 컴포넌트(상단바, 하단 Nav바, 뒤로가기 버튼)
로딩 컴포넌트(스피너) 구현
통계 페이지(통계 + 예산)
가계부(월별)
검색 페이지
API 에러메시지 UI 처리

Flow 3 (8/10 ~ 8/15)

env(Oauth 클라이언트 ID)
refreshToken 처리
기타 UI

기능

=======

가계부 검색	로그인

카테고리별, 기간별 검색 가능 금액 최소, 최대에 따른 검색	이메일 로그인 구글 로그인

가계부 등록	가계부 조회

수입, 지출 등록 카테고리별 등록	월별, 년별 조회 무한 스크롤 구현

예산 페이지	통계 페이지

예산 등록, 조회 애니메이션으로 로딩 깜빡임 문제해결 debounce로 예산등록	d3.js를 사용해 차트 구현 드롭다운 월별, 년별 조회