Yestoday-3

<div id="app-main">
  <header class="header">
    <div class="header__left">
      <p>안녕하세요,</p>
      <p>제이든님</p>
    </div>
    <div class="header__right">
      <p>도전 금액</p>
    </div>
  </header>
  <main class="main">
    <div class="main__header">
      <div>오늘</div>
    </div>
    <div class="main__body spend-list"></div>
  </main>
  <!-- footer는 추후 구현 예정이라 하드 코딩 -->
  <footer class="footer">
    <div>어제</div>
    <div class="yesterday-challenge-money">150,000 원</div>
    <div class="yesterday-total-spend-money">85,000 원</div>
  </footer>
</div>

import Observable from '../interfaces/observable';

export default class ChallengeMoneyModel extends Observable {
  constructor() {
    super();
    this.money = 0;
  }
  getMoney() {
    return this.money;
  }
  setMoney(money) {
    this.money = money;
    this.notify(this.money);
  }
}

export default class ChallengeMoneyView {
  constructor({ model }) {
    this.$appMain = document.querySelector('#app-main');
    this.$appChallengeInput = document.querySelector('#app-challenge-input');
    this.$target = document.createElement('div');
    this.$target.className = 'challenge-money';
    this.moneyModel = model;
    this.moneyModel.subscribe(this.render.bind(this)); //Model에 구독
    this.render();
  }
  render() {
    const money = this.moneyModel.getMoney(); //Model의 상태를 가져와서 렌더링
    this.$target.innerHTML = `${money.toLocaleString()} 원`;
    this.$target.addEventListener('click', this.hideShow.bind(this));
  }
  hideShow() {
    this.$appMain.style.display = 'none';
    this.$appChallengeInput.style.display = 'flex';
  }
}

import Observable from '../interfaces/observable';

export default class SpendItemModel extends Observable {
  constructor() {
    super();
    this.items = [];
    this.id = 1;
  }
  getItems() {
    return this.items;
  }
  setItems({ name, price }) {
    this.items.push({ id: this.id, name: name, price: price });
    this.notify(this.items);
    this.id++;
  }
  removeItem({ id }) {
    this.items = this.items.filter((item) => item.id !== +id);
    this.notify(this.items);
  }
}

export default class ChallengeMoneyView {
  constructor({ model }) {
    this.model = model;
    this.$target = document.createElement('div');
    this.$target.className = 'spend-money';
    this.$appMain = document.querySelector('#app-main');
    this.$appItemInput = document.querySelector('#app-item-input');
    this.model.subscribe(this.render.bind(this));
    this.render();
  }
  render() {
    this.spendMoney = 0;
    const items = this.model.getItems();
    items.forEach((item) => (this.spendMoney += item.price));
    this.$target.innerHTML = `${this.spendMoney.toLocaleString()} 원`;
    this.$target.addEventListener('click', this.hideShow.bind(this));
    this.$target.addEventListener('click', this.resetInput.bind(this));
  }
  hideShow() {
    this.$appMain.style.display = 'none';
    this.$appItemInput.style.display = 'flex';
  }
  resetInput() {
    const $itemInput = document.querySelectorAll('.main-item-input input');
    $itemInput.forEach((ele) => (ele.value = ''));
  }
}

export default class SpendItemView {
  constructor({ model }) {
    this.model = model;
    this.model.subscribe(this.render.bind(this));
    this.$spendList = document.querySelector('.spend-list');
    this.$spendList.addEventListener('dblclick', (event) => {
      if (!event.target.classList.contains('spend-item')) return;
      this.model.removeItem({ id: event.target.classList[1].split('-')[2] });
    });
    this.render();
  }
  render() {
    this.$target = ``;
    const items = this.model.getItems();
    items.forEach(
      (item) =>
        (this.$target += `
        <div class="spend-item spend-item-${item.id}">
          <div class="item-name item-name-${item.id}">${item.name}
          </div>
          <div class="item-money item-money-${item.id}">${item.price.toLocaleString()} 원
          </div>
        </div>`),
    );
    this.$spendList.innerHTML = this.$target;
  }
}