refactor: vendingMachine controller initialize 메소드 추가 및 menuItem 관련 로직 분리

Author: go-lani

src/js/app.js

@@ -1,8 +1,4 @@
 import VendingMachineController from "./controller/vendingMachine.js";
 
-function vendingMachindApp() {
-  // eslint-disable-next-line no-unused-vars
-  const controller = new VendingMachineController();
-}
-
-vendingMachindApp();
+const controller = new VendingMachineController();
+controller.initialize();

src/js/controller/vendingMachine.js

@@ -18,8 +18,6 @@ class VendingMachineController {
   constructor() {
     this.currentMenu = getLocalStorage("menu") || "manager";
 
-    const $menu = $("#menu");
-    const $menuItem = $(`#menu button[name=${this.currentMenu}]`);
     const managerModel = new ProductManagerModel();
     const chargerModel = new ChangeChargerModel();
     const purchaseModel = new ProductPurchaseModel();
@@ -41,12 +39,6 @@ class VendingMachineController {
       },
       purchase: () => {},
     };
-
-    this.#currentModel.initialize();
-    this.#handlers[this.currentMenu]();
-
-    $menuItem.classList.add("active");
-    $menu.addEventListener("click", this.menuHandler.bind(this));
   }
 
   submitChargerForm(e) {
@@ -118,6 +110,16 @@ class VendingMachineController {
     this.#models[$target.name].initialize();
     this.#handlers[$target.name]();
   }
+
+  bindEventHandlers() {
+    this.#handlers[this.currentMenu]();
+    $("#menu").addEventListener("click", this.menuHandler.bind(this));
+  }
+
+  initialize() {
+    this.#currentModel.initialize();
+    this.bindEventHandlers();
+  }
 }
 
 export default VendingMachineController;

src/js/view/view.js

@@ -2,18 +2,35 @@ import {
   createTemplateElement,
   CONTAINER_TEMPLATES,
 } from "../utils/templates.js";
+import { $, $$ } from "../utils/selector.js";
 
 class View {
   constructor(name) {
     this.name = name;
-    this.$app = document.querySelector("#app");
     this.template = CONTAINER_TEMPLATES[name];
+    this.$app = document.querySelector("#app");
+    this.$menuItem = $(`#menu button[name=${this.name}]`);
+    this.$$buttons = $$("#menu button");
   }
 
-  render() {
+  renderMenu() {
+    this.$$buttons.forEach((button) => {
+      button.classList.remove("active");
+    });
+
+    this.$menuItem.classList.add("active");
+  }
+
+  renderContent() {
     const { content } = createTemplateElement(this.template);
+
     this.$app.replaceChildren(content);
   }
+
+  render() {
+    this.renderContent();
+    this.renderMenu();
+  }
 }
 
 export default View;