Notice
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
Tags
- 스레싱
- 요구사항 분석
- 프로그래머스 데브코스
- 처리량
- 인터넷계층
- 4-way handshake
- 지연시간
- modebit
- CPU 스케줄링
- 럼바우
- 절차형
- 프로젝트 계확
- 다크모드
- PERT/CPM
- nosql
- M/M
- 메모리
- 관계형 데이터베이스
- 노출모듈패턴
- MVVM
- 다단계 큐
- 프록시패턴
- redis
- MongoDB
- 개발 모델
- 선언형
- 함수형
- 링크계층
- 페이징 교체 알고리즘
- 3-way handshake
Archives
- Today
- Total
노트
[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 22 (가계부 기능 추가3) 본문
토스 앱을 이용하다 카드 지출 내역을 달력으로 표시하는 기능을 보고
가계부에 추가해 보면 좋겠다 싶어서 한 번 시도해 봤다.
달력 기능을 추가하고 보니 달력까지 노출되었을 때, 총지출과 수입 표시가 좀 난잡합 느낌이 들어서
현재 자산에 마우스 커서를 올려놓았을 때만 보이도록 수정했다.
카테고리 옆에 달력 버튼(📅)을 추가해서 클릭했을 때 달력이 보이게 했고,
기본적으로 달력은 현재 날짜에 해당하는 달과 날짜를 출력한다.
월지출은 해당 달의 지출의 합을 나타내고 모든 수입은 초록색, 일반적인 지출은 회색, 가장 많은 지출을 한 날짜의 금액은 빨간색으로 표시했다.
달력의 날짜 칸을 클릭하면 선택한 날짜의 상세 소비 내역을 출력하고
이전날이나 다음날로 넘어가면 월지출이 갱신된다.
X 버튼을 눌러 달력을 닫을 수 있으며 달력을 닫으면 다시 전체 소비 내역을 출력한다.
handleGetConsumptionDetails() 마지막에 calendar를 랜더링 하도록 해서
내역 추가나 삭제할 때 달력도 갱신될 수 있도록 구성했다.
달력 기능을 빨리 구현해보고 싶은 마음에 코드가 많이 복잡해졌다.
정리가 되면 코드를 추가해 볼 수 있도록 해야겠다.
관련글
'TIL' 카테고리의 다른 글
[클라우딩 어플리케이션 엔지니어링 TIL] - 6주차 피그마2 (0) | 2024.05.21 |
---|---|
[클라우딩 어플리케이션 엔지니어링 TIL] - 6주차 피그마 (0) | 2024.05.20 |
[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 21 (0) | 2024.05.14 |
[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 20 (0) | 2024.05.13 |
[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 19 (0) | 2024.05.10 |