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

앞으로 약 2주간 코딩 테스트를 위한 알고리즘 강의를 진행해서

남는 시간에 지난 내용 복습할 겸 가계부를 좀 더 개선해 봤다.

수정한 UI

1. 총지출, 수입 추가

현재 자산 아래쪽에 소비 내역의 총지출과 수입을 추가하여 재정 상황을 빠르게 파악할 수 있다.

handleGetConsumptionDetails 안에서 소비 내역 리스트들을 구성할 때 지출과 수입의 합도 같이 계산해서

소비 내역을 추가, 삭제할 때 알아서 다시 갱신 하도록 했다.

const $totalMinusValue = document.querySelector(".total-minus-value");
const $totalPlusValue = document.querySelector(".total-plus-value");
const handleGetConsumptionDetails = async () => {
  let totalPlus = 0, totalMinus = 0;
  list.sort((a, b) => {...})
    .map(({ createAt, category, description, price, fundsAtTheTime, id }) => {
      ...
      if (category == "plus") totalPlus += price;
      else totalMinus += price;
      ...
      }
    });
  $totalMinusValue.textContent = totalMinus.toLocaleString();
  $totalPlusValue.textContent = "+"+totalPlus.toLocaleString();
};

 

2) 선택한 카테고리 내역만 출력

전체 또는 지출과 수입 내역만 볼 수 있도록 조그마한 버튼들을 추가했다.

 

먼저 handleGetConsumptionDetails 안에서 각 소비 내역에 class 속성으로 카테고리 값을 미리 추가해놓고

$li.classList.add(category); // category: "minus" or "plus"

 

카테고리 값에 따른 정렬은 sort-list.js파일을 따로 만들어서 작업했다.

전체(All) 버튼이 눌리면 모든 리스트가 보여야 하므로 querySelectorAll로 접근하여 forEach문으로 요소들을 toShow

$sortButtonAll.addEventListener("click", function () {
  if (!$sortButtonAll.className.includes("active")) {
    document.querySelectorAll(".minus").forEach(function (elem) { toShow(elem) });
    document.querySelectorAll(".plus").forEach(function (elem) { toShow(elem) });
    $sortButtonAll.classList.add("active");
    reMoveActive($sortButtonMinus);
    reMoveActive($sortButtonPlus);
  }
});

const reMoveActive = (node) => {
    if (node.className.includes("active"))
        node.classList.remove("active");
}

 

지출(minus) 버튼이 눌린다면 아래 코드처럼 동작하게 했다.

$sortButtonMinus.addEventListener("click", function () {
  if (!$sortButtonMinus.className.includes("active")) {
    // minus들은 toShow
    document.querySelectorAll(".minus").forEach(function (elem) { toShow(elem) });
    // plus들은 toHidden
    document.querySelectorAll(".plus").forEach(function (elem) { toHidden(elem) });
    // 눌린 버튼 활성화
    $sortButtonMinus.classList.add("active");
    // 나머지 버튼은 비활성화
    reMoveActive($sortButtonAll);
    reMoveActive($sortButtonPlus);
  }
});

 

3) 기타 수정 사항

좀 더 많은 목록들이 오목조목하게 보이도록 스타일도 조금 수정했다.

• 아래의 있던 캡션을 위로 올리고 날짜를 표시
• 위아래 padding, margin 축소
• description과 price를 같은 줄에 표시하고 space-between 등등

 

기능을 개발하는 것보다 글자나 가격, 버튼 위치, 크기, 색 이런 자잘한 부분들을 수정하는 게 더 오래 걸렸다😅

디자인은 할때마다 매번 새롭게 느껴진다.... 애니메이션은 다음에 시간이 나면 시도하는 걸로

 

관련글

가계부 기능 추가

가계부 기능 추가3