feat: 메뉴 관련 localStorage 기능 추가 및 리팩토링

Author: go-lani

index.html

@@ -34,7 +34,7 @@ <h1 class="text-3xl font-bold">🥤 자판기 🥤</h1>
             type="button"
             id="product-manage-menu"
             name="manager"
-            class="button active"
+            class="button"
           >
             상품 관리
           </button>

src/js/controller/vendingMachine.js

@@ -4,17 +4,23 @@ import ChangeChargerModel from "../model/changeCharger.js";
 import { $, $$ } from "../utils/selector.js";
 import { ValidationError } from "../utils/error.js";
 import { ERROR_MESSAGE } from "../utils/constants.js";
-import { validateChargerInput, validateManagerInputs } from "../utils/utils.js";
+import {
+  getLocalStorage,
+  setLocalStorage,
+  validateChargerInput,
+  validateManagerInputs,
+} from "../utils/utils.js";
 
 class VendingMachineController {
   #currentModel;
   #models;
   #handlers;
 
   constructor() {
-    this.currentMenu = "manager";
+    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();
@@ -40,6 +46,7 @@ class VendingMachineController {
     this.#currentModel.initialize();
     this.#handlers[this.currentMenu]();
 
+    $menuItem.classList.add("active");
     $menu.addEventListener("click", this.menuHandler.bind(this));
   }
 
@@ -112,6 +119,7 @@ class VendingMachineController {
     this.#currentModel = this.#models[$target.name];
 
     $target.classList.add("active");
+    setLocalStorage("menu", this.currentMenu);
   }
 
   changeView($target) {