refactor: vendinMachine > submitChargerForm 메소드 dom 의존성 제거

Author: go-lani

src/js/controller/vendingMachine.js

@@ -7,7 +7,6 @@ import { ERROR_MESSAGE } from "../utils/constants.js";
 import {
   getLocalStorage,
   setLocalStorage,
-  validateChargerInput,
   validateManagerInputs,
 } from "../utils/utils.js";
 
@@ -52,14 +51,7 @@ class VendingMachineController {
 
   submitChargerForm(e) {
     e.preventDefault();
-    const chargingInput = $(".charger-input");
-    try {
-      validateChargerInput(chargingInput.value);
-      this.#currentModel.setState("totalAmount", Number(chargingInput.value));
-    } catch (err) {
-      alert(err.message);
-      chargingInput.focus();
-    }
+    this.#currentModel.setState("totalAmount", e);
   }
 
   submitManagerForm(e) {

src/js/model/changeCharger.js

@@ -4,7 +4,10 @@ import {
   getLocalStorage,
   isInitialState,
   setLocalStorage,
+  validateChargerInput,
 } from "../utils/utils.js";
+import { ERROR_MESSAGE } from "../utils/constants.js";
+import { ValidationError } from "../utils/error.js";
 
 const CHANGE_CHARGER_INITIAL_STATE = {
   totalAmount: 0,
@@ -30,18 +33,44 @@ class ChangeChargerModel {
     return this.#state;
   }
 
-  setState(state, newState) {
-    this.#state[state] += newState;
-
-    const coinCounts = calculateCoinCount(newState);
+  setCoinCounts(inputAmount) {
+    const coinCounts = calculateCoinCount(inputAmount);
 
     Object.keys(this.#state.coinCounts).forEach((key) => {
       this.#state.coinCounts[key] += coinCounts[key];
     });
+  }
+
+  setTotalAmount(inputAmount) {
+    this.#state.totalAmount += inputAmount;
+  }
+
+  updateTotalAmount(chargerInput) {
+    const inputAmount = Number(chargerInput.value);
+    try {
+      validateChargerInput(inputAmount);
 
-    setLocalStorage("charger", this.#state);
+      this.setTotalAmount(inputAmount);
+      this.setCoinCounts(inputAmount);
+      this.#view.update(this.#state);
 
-    this.#view.update(this.#state);
+      setLocalStorage("charger", this.#state);
+    } catch (err) {
+      if (err.message === ERROR_MESSAGE.INVALID_STATE) return;
+
+      alert(err.message);
+      chargerInput.focus();
+    }
+  }
+
+  setState(state, e) {
+    switch (state) {
+      case "totalAmount":
+        this.updateTotalAmount(e.target["charger-input"]);
+        break;
+      default:
+        throw new ValidationError(ERROR_MESSAGE.INVALID_STATE);
+    }
   }
 
   initialize() {

src/js/utils/constants.js

@@ -11,4 +11,5 @@ export const ERROR_MESSAGE = {
   EMPTY_VALUE: "빈 값이 입력되었습니다.",
   INVALID_AMOUNT: `${MINIMUM_PRODUCT_PRICE}원 이상 입력 가능합니다.`,
   INVALID_UNIT: `${PRODUCT_PRICE_UNIT}원 단위로 입력 가능합니다.`,
+  INVALID_STATE: "잘못된 state가 입력되었습니다",
 };

src/js/utils/templates.js

@@ -74,7 +74,7 @@ export const COIN_CHARGING_TEMPLATE = `<div id="coin-charging-container">
         <input
           type="number"
           class="charger-input"
-          name="product-quantity"
+          name="charger-input"
           placeholder="자판기가 보유할 금액"
           min="0"
         />