[클라우딩 어플리케이션 엔지니어링 TIL] - DAY 22 (가계부 기능 추가3)

토스 앱을 이용하다 카드 지출 내역을 달력으로 표시하는 기능을 보고

가계부에 추가해 보면 좋겠다 싶어서 한 번 시도해 봤다.

n번째 수정된 UI / 현재 자산에 hover했을 때

달력 기능을 추가하고 보니 달력까지 노출되었을 때, 총지출과 수입 표시가 좀 난잡합 느낌이 들어서

현재 자산에 마우스 커서를 올려놓았을 때만 보이도록 수정했다.

 

 

📅 클릭 시

카테고리 옆에 달력 버튼(📅)을 추가해서 클릭했을 때 달력이 보이게 했고,

기본적으로 달력은 현재 날짜에 해당하는 달과 날짜를 출력한다.

월지출은 해당 달의 지출의 합을 나타내고 모든 수입은 초록색, 일반적인 지출은 회색, 가장 많은 지출을 한 날짜의 금액은 빨간색으로 표시했다.

달력의 날짜 칸을 클릭하면 선택한 날짜의 상세 소비 내역을 출력하고

이전날이나 다음날로 넘어가면 월지출이 갱신된다.

X 버튼을 눌러 달력을 닫을 수 있으며 달력을 닫으면 다시 전체 소비 내역을 출력한다.

 

handleGetConsumptionDetails() 마지막에 calendar를 랜더링 하도록 해서

내역 추가나 삭제할 때 달력도 갱신될 수 있도록 구성했다.

 

 

 

달력 기능을 빨리 구현해보고 싶은 마음에 코드가 많이 복잡해졌다.

정리가 되면 코드를 추가해 볼 수 있도록 해야겠다.

 

관련글

가계부 기능 추가

가계부 기능 추가2