diff --git a/src/js/index.js b/src/js/index.js
index e69de29b..7f166e07 100644
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -0,0 +1,80 @@
+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();
+
+ if (menuName === "") {
+ alert("메뉴를 입력하세요!");
+ return;
+ }
+
+ element("#espresso-menu-list").insertAdjacentHTML(
+ "beforeend",
+ `
`
+ );
+
+ 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();