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

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

### 달력 탭
- [ ] 날짜를 계산하여(5주, 6주 혹은 윤달) 달력을 적당한 크기로 나타낸다.
- [ ] (달력만 그리드 다른건 flex)
- [ ] 오늘날짜는 배경색을 다르게 표시한다.
- [ ] 지출현황을 구분하여 표출한다.
- [ ] 하단에는 수입,지출통계를 표출한다.

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