From 7c2a09b4d91f5f3dcd86e524ccc6e4ceaca9b66c Mon Sep 17 00:00:00 2001
From: terrydkim <kdjtiger@gmail.com>
Date: Tue, 30 Apr 2024 21:49:07 +0900
Subject: [PATCH 1/3] small : init

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

diff --git a/src/js/index.js b/src/js/index.js
index e69de29b..094fb309 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -0,0 +1 @@
+console.log("hi world!")
\ No newline at end of file

From 38217a81daeff50ee4abf71bedb82ff592bfae9c Mon Sep 17 00:00:00 2001
From: terrydkim <kdjtiger@gmail.com>
Date: Tue, 7 May 2024 22:38:30 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/index.js | 45 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 44 insertions(+), 1 deletion(-)

diff --git a/src/js/index.js b/src/js/index.js
index 094fb309..89a59077 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1 +1,44 @@
-console.log("hi world!")
\ No newline at end of file
+const element = (selector) => document.querySelector(selector);
+
+const APP = () => {
+  const addMenu = () => {
+    const menuName = element("#espresso-menu-name").value.trim();
+
+    if (menuName === "") {
+      alert("메뉴를 입력하세요!");
+      return;
+    }
+    //추가 로직
+    element("#espresso-menu-list").insertAdjacentHTML(
+      "beforeend",
+      `<li class="menu-list-item d-flex items-center py-2">
+        <span class="w-100 pl-2 menu-name">${menuName}</span>
+        <button
+          type="button"
+          class="bg-gray-50 text-gray-500 text-sm mr-1 menu-edit-button"
+        >
+          수정
+        </button>
+        <button
+          type="button"
+          class="bg-gray-50 text-gray-500 text-sm menu-remove-button"
+        >
+          삭제
+        </button>
+      </li>`
+    );
+
+    element("#espresso-menu-name").value = "";
+  };
+
+  //
+
+  // 카테고리마다 변경.. 아 용어가 생각이 안나네
+  element("#espresso-menu-submit-button").addEventListener("click", addMenu);
+  element("#espresso-menu-form").addEventListener("submit", (event) => {
+    event.preventDefault();
+    addMenu();
+  });
+};
+
+APP();

From 93bddfa1b1962c2f334f5d888ac942bd7503f296 Mon Sep 17 00:00:00 2001
From: terrydkim <kdjtiger@gmail.com>
Date: Thu, 9 May 2024 22:03:44 +0900
Subject: [PATCH 3/3] =?UTF-8?q?feat:=20=EB=A9=94=EB=89=B4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95=20&=20=EC=82=AD=EC=A0=9C=20&=20=EC=B9=B4=EC=9A=B4?=
 =?UTF-8?q?=ED=8A=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

diff --git a/src/js/index.js b/src/js/index.js
index 89a59077..7f166e07 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -1,6 +1,11 @@
 const element = (selector) => document.querySelector(selector);
 
 const APP = () => {
+  const updateMenuCount = () => {
+    const menuCount = document.querySelectorAll(".menu-list-item").length;
+    element(".menu-count").textContent = `총 ${menuCount} 개`;
+  };
+
   const addMenu = () => {
     const menuName = element("#espresso-menu-name").value.trim();
 
@@ -8,7 +13,7 @@ const APP = () => {
       alert("메뉴를 입력하세요!");
       return;
     }
-    //추가 로직
+
     element("#espresso-menu-list").insertAdjacentHTML(
       "beforeend",
       `<li class="menu-list-item d-flex items-center py-2">
@@ -29,16 +34,47 @@ const APP = () => {
     );
 
     element("#espresso-menu-name").value = "";
+    updateMenuCount();
   };
 
   //
+  const editMenu = (event) => {
+    const menuNameElement = event.target
+      .closest("li")
+      .querySelector(".menu-name");
+    const newName = (
+      prompt("메뉴명을 수정하세요.", menuNameElement.textContent) || ""
+    ).trim();
+    if (newName !== "") {
+      menuNameElement.textContent = newName;
+    }
+  };
 
-  // 카테고리마다 변경.. 아 용어가 생각이 안나네
+  const removeMenu = (event) => {
+    const menuElement = event.target.closest("li");
+    const isConfirmed = confirm("정말 삭제하시겠습니까?");
+    if (isConfirmed) {
+      menuElement.remove();
+      updateMenuCount();
+    }
+  };
+
+  // 동적으로 변경?
   element("#espresso-menu-submit-button").addEventListener("click", addMenu);
+
   element("#espresso-menu-form").addEventListener("submit", (event) => {
     event.preventDefault();
     addMenu();
   });
+
+  element("#espresso-menu-list").addEventListener("click", (event) => {
+    if (event.target.classList.contains("menu-edit-button")) {
+      editMenu(event);
+    }
+    if (event.target.classList.contains("menu-remove-button")) {
+      removeMenu(event);
+    }
+  });
 };
 
 APP();