Flow1 - 회원가입/로그인Main → Login → SignUp → Login → Logout → LoginFlow2 — 가계부 등록 및 가계부 조회Account Book → Account create → Account Book → Account updateFlow3 — 가계부 조회 관련 전체 페이지Demo Login → Account Book → Statistic → Budget
안녕하세요~
그럼 지금부터 편리하게 돈을 관리 해볼 수 있는 10원 모아 어플리케이션!
시연연상 보여드리도록 하겠습니다
Flow1 - 회원가입/로그인
Main → Login → SignUp → Login → Logout → Login
먼저 회원가입 및 로그인 페이지
로그인은 두 가지 방식
- 일반 이메일 회원가입
- 구글 로그인 회원가입
서비스를 이용시에는 회원가입이 필요합니다.
간단한 이메일 회원가입을 진행하도록 하겠습니다.
— 이메일, 닉네임, 비밀번호를 입력하여 회원가입을 진행할 수 있습니다
test1234!
중복된 이메일은 다음과 같은 서버 응답 — 토스트
유효한 값들은 모두 입력 — 회원가입 성공 토스트
Action
[action]
- 중복된 이메일 기입
→ error 서버 응답 보여주기
[action]
- 이메일 회원가입 후 성공하는 로그아웃
- 구글 로그인 성공 후 로그아웃 진행
Flow2 — 가계부 등록 및 가계부 조회
Account Book → Account create → Account Book → Account update
로그인에 성공하면, 다음과 같은 가계부 페이지를 확인 할 수 있습니다.
글을 작성해보도록 하겠습니다.
— 금액 0 ( 입력안하기 )
다음과 같은 유효성 검증 문구가 나오고, 유효성 검증을 통과하면 등록에 성공
카테고리는 기본적인 옵션을 제공
카테고리는 CRUD 가능
수입, 지출 탭을 이동해도 데이터가 유지됩니다
→ 유저의 편의성
[action]
- 가계 글 작성 페이지 이동
- 필수 입력값 빼고 등록하기
→ 유효성 검증하고 있는 것 보여주기 (금액을 0원으로 등록하면 유효성 검증 문구 나옴)
- 카테고리 모달 열기
→ 카테고리 서버에서 default 값이 세팅되어있고, CRUD가 가능하다는 간단한 설명
이외에도 다양한 카테ㅗ리
- 카테고리 모달을 토글하여 CRUD 기능보여주기
- 금액, 날짜 입력한 후에 수입/지출 탭 변경해도 편의성을 위해 그대로 유지.
[action]
- 글 작성하기 진행
- 작성된 글일 일별, 캘린더, 월별에 노출되는 것 보여주기
- 다른 날짜로 글을 하다 더 작성하기
→ 다른 월로 작성하여, sum 결과와 날짜 이동시 결과 값(sum) 달라지는 것 보여주기
→ 월을 넘길때 쿼리 스트링이 달라지는 것 보여주기
Flow3 — 가계부 조회 관련 전체 페이지
Demo Login → Account Book → Statistic → Budget
실ㅔ 유저 경험을 확인하기 위해서 데모 계정으로 로그인해서 보여드리도록 하겠습니다.
데모 계정으로 로그인
가계부
— 무한 스크롤 기능이 지원되고,
— 날짜를 바꾸면 다른 데이터가 해당하는 데이터가 조회
→ queryString으로 검색조건 유지
검색
— 검색 버튼 클릭하여 조회
— content 조회
— 검색 조건 넣어서 조회
통계
— d.3를 사용하
— 상위 랭킹된 데이터 순서로 노출,
— 10퍼 미만은 합쳐서 노출
— dropdown 기준으로 날짜 조회
예산
— 예산 글 등록
— 결과를 다음과 같이 확인
[action]
- 로그아웃 후, 데모 계정으로 재로그인
- 일별 가계부 무한 스크롤 보여주기
- 검색 페이지 보여주기
- 기본 검색
- input에 아무것도 기입하지 않고, 검색
- content 기준(빈 값도 검색하면 총합 결과 나오니까 참고하세요)
- chevron down을 클릭해서 검색조건을 넣어서 나오는 결과 보여주기
- 무한 스크롤 되는거 보여주기
- 통계 페이지 수입, 지출 보여주기
→ d3.js 사용
→ 나머지 etc 처리 (10% 미만) 에 대한 언급
→ 연, 월별 드롭다운 기준으로 dateSelector 변경하는 것 보여주기
- 예산 페이지 보여주기
- 예산 등록
- 등록 결과 반영 보여주기
끝내며
저희 앱에서 사용되고 있는 API는 AccessToken을 통해 유저를 검증하고 있으며, AccessToken 만료시 로그인 페이지로 이동하게 됩니다.
현재 리프레쉬 토큰의 유효기간은 2주
해당 기간에는 자동 로그인되어 해당 서비스를 이용할 수 있습니다.
3주간 아낌없이 노력해준 동료들에게 감사드리며 시연영상 마치도록 하겠습니다.
영상 시청해주셔서 감사합니다.