From b94fb7e3b41bd9de68c808253a8a9c30b110164d Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Sun, 24 Jul 2022 20:22:28 +0900
Subject: [PATCH 1/6] =?UTF-8?q?Feat:=20=ED=92=88=EC=A0=88=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5,=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B8=B0?=
 =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html      |   2 +-
 src/js/index.js | 100 ++++++++++++++++++++++++++++++++++++++----------
 2 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/index.html b/index.html
index 375cdb32..077cf4e2 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
         <a href="/" class="text-black">
           <h1 class="text-center font-bold">🌝 문벅스 메뉴 관리</h1>
         </a>
-        <nav class="d-flex justify-center flex-wrap">
+        <nav id="cafe-category-name-list" class="d-flex justify-center flex-wrap">
           <button
                   data-category-name="espresso"
                   class="cafe-category-name btn bg-white shadow mx-1"
diff --git a/src/js/index.js b/src/js/index.js
index 052131cd..193f13d1 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,11 +1,17 @@
 const $input = document.getElementById('espresso-menu-name');
-const $form = document.getElementById('espresso-menu-form');
 
-// menuList = [{name: string, category: string}]
+// menuList = [{name: string; category: string; isSoldOut: boolean;}]
 let menuList = [];
 let category = 'espresso';
 
 // events
+const addMenuList = (name) => {
+  if (!name) return;
+  menuList = [...menuList, {name, category}];
+  renderAboutMenus();
+  $input.value = '';
+};
+
 const editMenu = ({target}) => {
   if (!target.classList.contains('menu-edit-button')) return;
   const name = window.prompt('메뉴명을 수정하세요');
@@ -25,40 +31,95 @@ const removeMenu = ({target}) => {
   renderAboutMenus();
 };
 
-const addMenuList = (name) => {
-  if (!name) return;
-  menuList = [...menuList, {name, category}];
+const toggleIsSoldOut = ({target}) => {
+  const menuId = Number(target.parentElement.dataset.menuId);
+  menuList = menuList.map((menu, index) => 
+    index === menuId ? {...menu, isSoldOut: !menu.isSoldOut} : menu,
+  );
+
+  const textClassList = target.previousElementSibling.classList;
+  if (textClassList.contains('sold-out')) {
+    textClassList.remove('sold-out')
+  } else {
+    textClassList.add('sold-out')
+  }
+};
+
+const setCategory = (_category) => {
+  if (!_category) return;
+  category = _category;
   renderAboutMenus();
-  $input.value = '';
 };
 
 // addEventListeners
-$form.addEventListener('submit', (e) => {
-  e.preventDefault();
-  addMenuList($input.value);
-});
+const addEventListenerToForm = () => {
+  const $form = document.getElementById('espresso-menu-form');
+  $form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    addMenuList($input.value);
+  });
+};
 
 const addEventListenersToMenuList = () => {
   const $menu = document.getElementById('espresso-menu-list');
-  $menu.addEventListener('click', editMenu);
-  $menu.addEventListener('click', removeMenu);
-}
+
+  $menu.addEventListener('click', (e) => {
+    switch (e.target.dataset.action) {
+      case 'edit': 
+        editMenu(e);
+        return;
+      case 'remove':
+        removeMenu(e);
+        return;
+      case 'sold-out':
+        toggleIsSoldOut(e);
+        return;
+    }
+  });
+};
+
+const addEventListenerToCategoryList = () => {
+  const $categoryList = document.getElementById('cafe-category-name-list');
+  $categoryList.addEventListener('click', ({target}) => {
+    const selectedCategory = target.dataset.categoryName;
+    if (!selectedCategory) return;
+    
+    setCategory(selectedCategory);
+  });
+};
+
+window.onload = () => {
+  addEventListenerToForm();
+  addEventListenersToMenuList();
+  addEventListenerToCategoryList();
+};
 
 // renders
 const renderMenuList = () => {
   const $menuList = document.getElementById('espresso-menu-list');
-  const menuListItemElements = menuList.map((menu, index) => {
+  const menuListItemHtmls = menuList
+    .filter(menu => menu.category === category)
+    .map((menu, index) => {
     return `
       <li data-menu-id="${index}" class="menu-list-item d-flex items-center py-2">
-        <span class="w-100 pl-2 menu-name">${menu.name}</span>
+        <span class="w-100 pl-2 menu-name${menu.isSoldOut ? ' sold-out' : ''}">${menu.name}</span>
         <button
           type="button"
+          data-action="sold-out"
+          class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
+          >
+          품절
+          </button>
+          <button
+          type="button"
+          data-action="edit"
           class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
-        >
+          >
           수정
-        </button>
-        <button
+          </button>
+          <button
           type="button"
+          data-action="remove"
           class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
         >
           삭제
@@ -66,8 +127,7 @@ const renderMenuList = () => {
       </li>
       `
   });
-  $menuList.innerHTML = menuListItemElements.join('');
-  addEventListenersToMenuList();
+  $menuList.innerHTML = menuListItemHtmls.join('');
 };
 
 const renderMenuCount = () => {

From aef632f7a03bb4748e34a477cc072604669499d9 Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Mon, 25 Jul 2022 00:12:52 +0900
Subject: [PATCH 2/6] =?UTF-8?q?Feat:=20step2=20=EC=9A=94=EA=B5=AC=EC=82=AC?=
 =?UTF-8?q?=ED=95=AD=20-=20=EC=83=81=ED=83=9C=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=EB=A1=9C=20=EB=A9=94=EB=89=B4=20=EA=B4=80=EB=A6=AC=ED=95=98?=
 =?UTF-8?q?=EA=B8=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                   |  16 +--
 src/js/index.js              | 268 +++++++++++++++++------------------
 src/js/utils/dom.js          |   3 +
 src/js/utils/localStorage.js |  18 +++
 4 files changed, 161 insertions(+), 144 deletions(-)
 create mode 100644 src/js/utils/dom.js
 create mode 100644 src/js/utils/localStorage.js

diff --git a/index.html b/index.html
index 077cf4e2..2c019b90 100644
--- a/index.html
+++ b/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 id="category-title" class="mt-1">☕ 에스프레소 메뉴 관리</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>
diff --git a/src/js/index.js b/src/js/index.js
index 193f13d1..94e2623f 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,141 +1,137 @@
-const $input = document.getElementById('espresso-menu-name');
-
-// menuList = [{name: string; category: string; isSoldOut: boolean;}]
-let menuList = [];
-let category = 'espresso';
-
-// events
-const addMenuList = (name) => {
-  if (!name) return;
-  menuList = [...menuList, {name, category}];
-  renderAboutMenus();
-  $input.value = '';
-};
-
-const editMenu = ({target}) => {
-  if (!target.classList.contains('menu-edit-button')) return;
-  const name = window.prompt('메뉴명을 수정하세요');
-  if (!name) return;
-
-  const menuId = Number(target.parentElement.dataset.menuId);
-  menuList = menuList.map((menu, index) => index === menuId ? {...menu, name} : menu);
-  renderAboutMenus();
-};
-
-const removeMenu = ({target}) => {
-  if (!target.classList.contains('menu-remove-button')) return;
-  if (!window.confirm('정말 삭제하시겠습니까?')) return;
-
-  const menuId = Number(target.parentElement.dataset.menuId);
-  menuList = menuList.filter((_, index) => index !== menuId);
-  renderAboutMenus();
-};
-
-const toggleIsSoldOut = ({target}) => {
-  const menuId = Number(target.parentElement.dataset.menuId);
-  menuList = menuList.map((menu, index) => 
-    index === menuId ? {...menu, isSoldOut: !menu.isSoldOut} : menu,
-  );
-
-  const textClassList = target.previousElementSibling.classList;
-  if (textClassList.contains('sold-out')) {
-    textClassList.remove('sold-out')
-  } else {
-    textClassList.add('sold-out')
-  }
-};
-
-const setCategory = (_category) => {
-  if (!_category) return;
-  category = _category;
-  renderAboutMenus();
-};
-
-// addEventListeners
-const addEventListenerToForm = () => {
-  const $form = document.getElementById('espresso-menu-form');
-  $form.addEventListener('submit', (e) => {
-    e.preventDefault();
-    addMenuList($input.value);
-  });
-};
-
-const addEventListenersToMenuList = () => {
-  const $menu = document.getElementById('espresso-menu-list');
-
-  $menu.addEventListener('click', (e) => {
-    switch (e.target.dataset.action) {
-      case 'edit': 
-        editMenu(e);
-        return;
-      case 'remove':
-        removeMenu(e);
-        return;
-      case 'sold-out':
-        toggleIsSoldOut(e);
-        return;
-    }
-  });
-};
-
-const addEventListenerToCategoryList = () => {
-  const $categoryList = document.getElementById('cafe-category-name-list');
-  $categoryList.addEventListener('click', ({target}) => {
+import { $, $id } from './utils/dom.js';
+import LocalStorage from './utils/localStorage.js'
+
+function App () {
+  const MenuListStorage = new LocalStorage('menuList');
+
+  // states
+  // [{name: string; category: string; isSoldOut: boolean;}]
+  let menuList = MenuListStorage.get() ?? [];
+  let category = 'espresso';
+
+  window.onload = () => {
+    initEventListenes();
+    renderAboutMenus();
+  };
+
+  // utils
+  const getMenuId = (target) => {
+    return Number(target.parentElement.dataset.menuId);
+  };
+
+  // events
+  const addMenu = () => {
+    let name = $id('menu-name').value;
+    if (!name) return;
+
+    menuList = [...menuList, {name, category}];
+    MenuListStorage.set(menuList);
+    renderAboutMenus();
+    $id('menu-name').value = '';
+  };
+
+  const editMenu = ({target}) => {
+    const name = window.prompt('메뉴명을 수정하세요', prevName);
+    if (!name) return;
+
+    const menuId = getMenuId(target);
+    menuList = menuList.map((menu, index) => index === menuId ? {...menu, name} : menu);
+    MenuListStorage.set(menuList);
+    renderAboutMenus();
+  };
+
+  const removeMenu = ({target}) => {
+    if (!window.confirm('정말 삭제하시겠습니까?')) return;
+
+    const menuId = getMenuId(target);
+    menuList = menuList.filter((_, index) => index !== menuId);
+    MenuListStorage.set(menuList);
+    renderAboutMenus();
+  };
+
+  const toggleIsSoldOut = ({target}) => {
+    const menuId = getMenuId(target);
+    menuList = menuList.map((menu, index) => 
+      index === menuId ? {...menu, isSoldOut: !menu.isSoldOut} : menu,
+    );
+    MenuListStorage.set(menuList);
+    renderAboutMenus();
+  };
+
+  const setCategory = ({target}) => {
     const selectedCategory = target.dataset.categoryName;
-    if (!selectedCategory) return;
+    category = selectedCategory;
+    $id('category-title').textContent = `${target.textContent} 메뉴 관리`;
+    renderAboutMenus();
+  };
+
+  // addEventListeners
+  const initEventListenes = () => {
+    const $form = $id('menu-form');
+    $form.addEventListener('submit', (e) => {
+      e.preventDefault();
+      addMenu();
+    });
     
-    setCategory(selectedCategory);
-  });
-};
-
-window.onload = () => {
-  addEventListenerToForm();
-  addEventListenersToMenuList();
-  addEventListenerToCategoryList();
-};
-
-// renders
-const renderMenuList = () => {
-  const $menuList = document.getElementById('espresso-menu-list');
-  const menuListItemHtmls = menuList
-    .filter(menu => menu.category === category)
-    .map((menu, index) => {
-    return `
-      <li data-menu-id="${index}" class="menu-list-item d-flex items-center py-2">
-        <span class="w-100 pl-2 menu-name${menu.isSoldOut ? ' sold-out' : ''}">${menu.name}</span>
-        <button
-          type="button"
-          data-action="sold-out"
-          class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
-          >
-          품절
-          </button>
+    const $menu = $id('menu-list');
+    $menu.addEventListener('click', (e) => {
+      switch (e.target.dataset.action) {
+        case 'edit': 
+          editMenu(e);
+          return;
+        case 'remove':
+          removeMenu(e);
+          return;
+        case 'sold-out':
+          toggleIsSoldOut(e);
+          return;
+      }
+    });
+
+    const $categoryList = $id('cafe-category-name-list');
+    $categoryList.addEventListener('click', setCategory);
+  };
+
+  // renders
+  const renderAboutMenus = () => {
+    const menuListTemplate = menuList
+      .filter(menu => menu.category === category)
+      .map((menu, index) => {
+      return `
+        <li data-menu-id="${index}" class="menu-list-item d-flex items-center py-2">
+          <span class="w-100 pl-2 menu-name${menu.isSoldOut ? ' sold-out' : ''}">${menu.name}</span>
           <button
-          type="button"
-          data-action="edit"
-          class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
+            type="button"
+            data-action="sold-out"
+            class="bg-gray-50 text-gray-500 text-sm mr-1 menu-sold-out-button"
+            >
+            품절
+            </button>
+            <button
+            type="button"
+            data-action="edit"
+            class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
+            >
+            수정
+            </button>
+            <button
+            type="button"
+            data-action="remove"
+            class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
           >
-          수정
+            삭제
           </button>
-          <button
-          type="button"
-          data-action="remove"
-          class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
-        >
-          삭제
-        </button>
-      </li>
-      `
-  });
-  $menuList.innerHTML = menuListItemHtmls.join('');
-};
-
-const renderMenuCount = () => {
-  const $menuCount = document.querySelector('.menu-count');
-  $menuCount.textContent = `총 ${menuList.length}개`;
-};
-
-const renderAboutMenus = () => {
-  renderMenuList();
-  renderMenuCount();
-};
+        </li>
+        `
+    });
+    $id('menu-list').innerHTML = menuListTemplate.join('');
+    
+    renderMenuCount(menuListTemplate.length);
+  };
+
+  const renderMenuCount = (count) => {
+    $('.menu-count').textContent = `총 ${count}개`;
+  };
+}
+
+App();
\ No newline at end of file
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
new file mode 100644
index 00000000..5b7d13bc
--- /dev/null
+++ b/src/js/utils/dom.js
@@ -0,0 +1,3 @@
+export const $ = (selector) => document.querySelector(selector);
+
+export const $id = (id) => document.getElementById(id);
\ No newline at end of file
diff --git a/src/js/utils/localStorage.js b/src/js/utils/localStorage.js
new file mode 100644
index 00000000..c145f7d8
--- /dev/null
+++ b/src/js/utils/localStorage.js
@@ -0,0 +1,18 @@
+export default class LocalStorage {
+
+    constructor(key) {
+      this.key = key;
+    }
+
+    get () {
+      return JSON.parse(localStorage.getItem(this.key));
+    }
+
+    set (value) {
+      return localStorage.setItem(this.key, JSON.stringify(value));
+    }
+
+    remove (){
+      localStorage.removeItem(this.key);
+    }
+  }
\ No newline at end of file

From 73e918ac6d9aca30294a9338481e64b89dbd6386 Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Mon, 25 Jul 2022 00:16:20 +0900
Subject: [PATCH 3/6] =?UTF-8?q?Docs:=20README=20=EC=97=85=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 3189c863..124169f5 100644
--- a/README.md
+++ b/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

From 6b7834d3753e03fae215347b4685076cfc8e6b16 Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Mon, 25 Jul 2022 00:42:28 +0900
Subject: [PATCH 4/6] =?UTF-8?q?Fix:=20EOL=20=EA=B0=9C=ED=96=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/index.js              | 2 +-
 src/js/utils/dom.js          | 2 +-
 src/js/utils/localStorage.js | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/js/index.js b/src/js/index.js
index 94e2623f..2e2eb84e 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -134,4 +134,4 @@ function App () {
   };
 }
 
-App();
\ No newline at end of file
+App();
diff --git a/src/js/utils/dom.js b/src/js/utils/dom.js
index 5b7d13bc..311006eb 100644
--- a/src/js/utils/dom.js
+++ b/src/js/utils/dom.js
@@ -1,3 +1,3 @@
 export const $ = (selector) => document.querySelector(selector);
 
-export const $id = (id) => document.getElementById(id);
\ No newline at end of file
+export const $id = (id) => document.getElementById(id);
diff --git a/src/js/utils/localStorage.js b/src/js/utils/localStorage.js
index c145f7d8..546638fc 100644
--- a/src/js/utils/localStorage.js
+++ b/src/js/utils/localStorage.js
@@ -15,4 +15,4 @@ export default class LocalStorage {
     remove (){
       localStorage.removeItem(this.key);
     }
-  }
\ No newline at end of file
+  }

From edaaf5ebb61b5a3a334dc9b1b0f4e8c6bf3a6f06 Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Mon, 25 Jul 2022 00:50:16 +0900
Subject: [PATCH 5/6] =?UTF-8?q?Fix:=20=EC=98=A4=EB=A5=98=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/index.js b/src/js/index.js
index 2e2eb84e..ca65f598 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -31,7 +31,7 @@ function App () {
   };
 
   const editMenu = ({target}) => {
-    const name = window.prompt('메뉴명을 수정하세요', prevName);
+    const name = window.prompt('메뉴명을 수정하세요');
     if (!name) return;
 
     const menuId = getMenuId(target);

From 9990325c6de41b48fb6725a2a67f0cf95119b419 Mon Sep 17 00:00:00 2001
From: Leehaeun0 <hahigoo2020@gmail.com>
Date: Mon, 25 Jul 2022 00:55:45 +0900
Subject: [PATCH 6/6] =?UTF-8?q?Feat:=20trim=20=EB=A9=94=EC=84=9C=EB=93=9C?=
 =?UTF-8?q?=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/index.js b/src/js/index.js
index ca65f598..05abe9f1 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -21,7 +21,7 @@ function App () {
 
   // events
   const addMenu = () => {
-    let name = $id('menu-name').value;
+    let name = $id('menu-name').value?.trim();
     if (!name) return;
 
     menuList = [...menuList, {name, category}];
@@ -31,7 +31,7 @@ function App () {
   };
 
   const editMenu = ({target}) => {
-    const name = window.prompt('메뉴명을 수정하세요');
+    const name = window.prompt('메뉴명을 수정하세요').trim();
     if (!name) return;
 
     const menuId = getMenuId(target);