---
# System prepended metadata

title: 시나리오 작성

---

# 시나리오 작성
## nav
- [ ]  로고를 클릭하면 메인화면으로 이동한다. 
- [ ]  좌우화살표 클릭하면 활성화된 현재의 달이 변경된다. 
- [ ]  내역, 달력, 통계 탭을 클릭하면 각 탭에 맞는 페이지로 전환된다.

## 내역 section 
### AccountHistory Form 
- [ ]  각 입력 필드의 모든 값이 입력되면 체크박스가 활성화 된다
- [ ]  날짜 디폴트는 금일날짜로한다. 
- [ ]  날짜탭을 클릭하면 선택할 수 있다. 
- [ ]  분류는 클릭하면 선택 가능한 드랍다운 나타난다
- [ ]  해당 리스트에서 선택하면 선택된다. 
- [ ]  결제수단을 누르면 저장되어있던  결제수단이 나온다.
- [ ]  밑에 추가하기 누르면 결제수단을 추가하는 모달이 나타난다.
- [ ]  결제수단 우측에 있는 x 표시누르면 해당 결제 수단이 삭제되고 서버상에서 삭제요청을 보낸다. 
- [ ]  (삭제되면 가삭제처리 한다.)
- [ ]  금액은 포맷에 맞춰서 표출된다. 
- [ ] 체크박스 버튼을 누르면 입지추내역을 추가하는 요청을 서버에게 전송한다,
- [ ]  등록이 아닌 수정의 경우 불러온 값에서 값이 수정되면 체크박스가 활성화 된다 
### 결제수단 추가 모달 
- [ ] 결제수단을 입력하면 등록 버튼 활성화된다, 
- [ ]  등록버튼을 누르면 서버에게 결제수단 추가하는 요청을 보낸다. 
### table 
- [ ]  불러온 데이터의 개수를 보여준다 
- [ ]  받아온 내역에 대해서 입출 지출 금액을 가가 계산해서 표출한다. 
- [ ]  수입 지출 필터 옵션을 토글함으로서 내역을 필터링 할 수 있다. 
- [ ]  모든 내역은 날짜로 구분된다. 
- [ ]  날 별로 지출과 수입이 계산되어 상단에 표시된다. 
- [ ]  내역 row 에서 수정할 수 있도록 필드에 값이 채워진다. 
   
### 달력 탭
- [ ]  날짜를 계산하여(5주, 6주 혹은 윤달) 달력을 적당한 크기로 나타낸다. 
- [ ]  (달력만 그리드 다른건 flex)
- [ ]  오늘날짜는 배경색을 다르게 표시한다. 
- [ ]  지출현황을 구분하여 표출한다.
- [ ] 하단에는 수입,지출통계를 표출한다.

## 통계 탭
- [ ]  입지출 타입을 파이차트로 표시한다
- [ ]  파이차트 우측에는 타입별 지출 비율을 표시한다. 내림차순으로 표시한다. 
- [ ]  지출현황을 클릭하면 달별 소비 추이가 그래프로 나타난다.
- [ ]  지출현황을 클릭하면 해달 소비 타입에 대한 이번달 지출내역을 보여준다. 