[14기 김동영] step2 - 상태 관리로 메뉴 관리하기

README.md

@@ -73,10 +73,10 @@
 
 ## 🎯 step2 요구사항 - 상태 관리로 메뉴 관리하기
 
-- [ ] [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다.
-- [ ] 에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다.
- - [ ] 페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다.
-- [ ] 품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 `sold-out` class를 추가하여 상태를 변경한다.
+- [x] [localStorage](https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage)에 데이터를 저장하여 새로고침해도 데이터가 남아있게 한다.
+- [x] 에스프레소, 프라푸치노, 블렌디드, 티바나, 디저트 각각의 종류별로 메뉴판을 관리할 수 있게 만든다.
+ - [x] 페이지에 최초로 접근할 때는 에스프레소 메뉴가 먼저 보이게 한다.
+- [x] 품절 상태인 경우를 보여줄 수 있게, 품절 버튼을 추가하고 `sold-out` class를 추가하여 상태를 변경한다.
 - 품절 상태 메뉴의 마크업
 
 ```js

index.html

@@ -52,33 +52,33 @@ <h1 class="text-center font-bold">🌝 문벅스 메뉴 관리</h1>
  <main class="mt-10 d-flex justify-center">
  <div class="wrapper bg-white p-10">
  <div class="heading d-flex justify-between">
- <h2 class="mt-1">☕ 에스프레소 메뉴 관리</h2>
+ <h2 class="mt-1 category-title">☕ 에스프레소 메뉴 관리</h2>
  <span class="mr-2 mt-4 menu-count">총 0개</span>
  </div>
- <form id="espresso-menu-form">
+ <form id="menu-form">
  <div class="d-flex w-100">
- <label for="espresso-menu-name" class="input-label" hidden>
+ <label for="menu-name" class="input-label" hidden>
  에스프레소 메뉴 이름
  </label>
  <input
  type="text"
- id="espresso-menu-name"
+ id="menu-name"
  name="espressoMenuName"
  class="input-field"
- placeholder="에스프레소 메뉴 이름"
+ placeholder="메뉴 이름"
  autocomplete="off"
  />
  <button
  type="submit"
  name="submit"
- id="espresso-menu-submit-button"
+ id="menu-submit-button"
  class="input-submit bg-green-600 ml-2"
  >
  확인
  </button>
  </div>
  </form>
- <ul id="espresso-menu-list" class="mt-3 pl-0"></ul>
+ <ul id="menu-list" class="mt-3 pl-0"></ul>
  </div>
  </main>
  </div>

src/js/App.js

@@ -1,71 +1,199 @@
-import { select } from "./dom.js";
-import MenuItem from "./MenuItem.js";
+import MenuItem from "./components/MenuItem.js";
+import { select } from "./utils/dom.js";
+import { localStore } from "./utils/storage.js";
 
-export default function App() {
- /** @type {HTMLFormElement} */
- const menuForm = select("#espresso-menu-form");
+export default class App {
+ /**
+ * @type {HTMLFormElement}
+ * @readonly
+ */
+ #menuForm = select("#menu-form");
+
+ /**
+ * @type {HTMLUListElement}
+ * @readonly
+ */
+ #menuList = select("#menu-list");
 
- /** @type {HTMLUListElement} */
- const menuList = select("#espresso-menu-list");
+ /**
+ * @type {HTMLInputElement}
+ * @readonly
+ */
+ #menuInput = select("#menu-name");
 
- /** @type {HTMLInputElement} */
- const menuInput = select("#espresso-menu-name");
+ /**
+ * @type {HTMLSpanElement}
+ * @readonly
+ */
+ #menuCount = select(".menu-count");
 
- init();
+ /**
+ * @type {HTMLHeadingElement}
+ * @readonly
+ */
+ #categoryTitle = select(".category-title");
 
- function init() {
- menuForm.addEventListener("submit", (event) => {
+ /**
+ * @typedef {"espresso" | "frappuccino" | "blended" | "teavana" | "desert"} MenuCategory
+ * @typedef {{name: string, isSoldOut: boolean}} MenuItem
+ * @typedef {{selectedCategory: MenuCategory, menuList: MenuItem[]}} State
+ *
+ * @type {State}
+ */
+ #state = {
+ selectedCategory: "espresso",
+ menuList: localStore.get("espresso.menuList", []),
+ };
+
+ constructor() {
+ this.init();
+ this.render();
+ }
+
+ init() {
+ this.#menuForm.addEventListener("submit", (event) => {
  event.preventDefault();
- appendMenuItem();
+ this.appendMenuItem();
  });
 
- menuList.addEventListener("click", ({ target }) => {
- if (!target) return;
+ this.#menuList.addEventListener("click", ({ target }) => {
+ if (!target) {
+ return;
+ }
+
  const menuItem = target.closest("moon-menu-item");
+ const clickedIndex = Array.from(this.#menuList.children).indexOf(
+ menuItem,
+ );
 
  if (target.classList.contains("menu-edit-button")) {
- editMenuItem(menuItem);
+ this.editMenuItem(clickedIndex, menuItem);
  } else if (target.classList.contains("menu-remove-button")) {
- removeMenuItem(menuItem);
+ this.removeMenuItem(clickedIndex);
+ } else if (target.classList.contains("menu-sold-out-button")) {
+ this.toggleSoldOutMenuItem(clickedIndex, menuItem);
+ }
+ });
+
+ select("nav").addEventListener("click", ({ target }) => {
+ if (!target) {
+ return;
+ }
+
+ if ("categoryName" in target.dataset) {
+ /** @type {MenuCategory} */
+ const selectedCategory = target.dataset.categoryName;
+ this.setState({
+ selectedCategory,
+ menuList: localStore.get(`${selectedCategory}.menuList`, []),
+ });
+ this.updateCategoryTitle(target.innerText);
  }
  });
  }
 
- function appendMenuItem() {
- if (menuInput.value.trim()) {
- const menuItem = new MenuItem();
- menuItem.setAttribute("name", menuInput.value.trim());
- menuList.appendChild(menuItem);
- menuInput.value = "";
- updateMenuCount();
+ /**
+ * @param {State} nextState
+ */
+ setState(nextState) {
+ this.#state = { ...this.#state, ...nextState };
+ this.render();
+ localStore.set(
+ `${this.#state.selectedCategory}.menuList`,
+ this.#state.menuList,
+ );
+ }
+
+ render() {
+ this.#menuList.replaceChildren(
+ ...this.#state.menuList.map(
+ ({ name, isSoldOut }) => new MenuItem(name, isSoldOut),
+ ),
+ );
+ this.updateMenuCount();
+ }
+
+ appendMenuItem() {
+ const menuName = this.#menuInput.value.trim();
+ if (!menuName) {
+ return;
  }
+
+ this.setState({
+ menuList: [...this.#state.menuList, { name: menuName, isSoldOut: false }],
+ });
+ this.#menuInput.value = "";
  }
 
  /**
+ * @param {number} index
  * @param {MenuItem} menuItem
  */
- function editMenuItem(menuItem) {
- const newMenuName = window.prompt(
+ editMenuItem(index, menuItem) {
+ const menuName = window.prompt(
  "수정할 메뉴 이름을 입력하세요",
- menuItem.getAttribute("name"),
+ menuItem.name,
  );
- if (newMenuName) {
- menuItem.setAttribute("name", newMenuName);
+ if (!menuName) {
+ return;
  }
+
+ menuItem.name = menuName;
+ this.setState({
+ menuList: [
+ ...this.#state.menuList.slice(0, index),
+ {
+ name: menuItem.name,
+ isSoldOut: menuItem.isSoldOut,
+ },
+ ...this.#state.menuList.slice(index + 1),
+ ],
+ });
  }
 
  /**
+ * @param {number} index
  * @param {MenuItem} menuItem
  */
- function removeMenuItem(menuItem) {
- if (window.confirm("메뉴를 삭제하시겠습니까?")) {
- menuItem.remove();
- updateMenuCount();
+ toggleSoldOutMenuItem(index, menuItem) {
+ menuItem.isSoldOut = !menuItem.isSoldOut;
+ this.setState({
+ menuList: [
+ ...this.#state.menuList.slice(0, index),
+ {
+ name: menuItem.name,
+ isSoldOut: menuItem.isSoldOut,
+ },
+ ...this.#state.menuList.slice(index + 1),
+ ],
+ });
+ }
+
+ /**
+ * @param {number} index
+ */
+ removeMenuItem(index) {
+ if (!window.confirm("메뉴를 삭제하시겠습니까?")) {
+ return;
  }
+
+ this.setState({
+ menuList: [
+ ...this.#state.menuList.slice(0, index),
+ ...this.#state.menuList.slice(index + 1),
+ ],
+ });
+ }
+
+ updateMenuCount() {
+ const menuCount = this.#menuList.childElementCount;
+ this.#menuCount.textContent = `총 ${menuCount}개`;
  }
 
- function updateMenuCount() {
- const menuCount = menuList.children.length;
- select(".menu-count").textContent = `총 ${menuCount}개`;
+ /**
+ * @param {string} title
+ */
+ updateCategoryTitle(title) {
+ this.#categoryTitle.textContent = `${title} 메뉴 관리`;
  }
 }