From d13ea5a859a28a6e542c9d0788f3106f55a0a8a3 Mon Sep 17 00:00:00 2001 From: "misung.dev" Date: Wed, 6 Nov 2024 00:59:38 +0900 Subject: [PATCH 1/9] =?UTF-8?q?Feat:=2033.=20MenuApi=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20-=20=EB=A9=94=EB=89=B4=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B4=88=EA=B8=B0=ED=99=94=ED=95=98?= =?UTF-8?q?=EA=B8=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/js/index.js" | 54 ++++++++----------- 1 file changed, 21 insertions(+), 33 deletions(-) diff --git "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" index 3825c58..1ad82c9 100644 --- "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" +++ "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" @@ -19,6 +19,13 @@ import store from "./store/index.js"; // fetch("url", option); const BASE_URL = "http://localhost:3000/api"; +const MenuApi = { + async getAllMenuByCategory(category) { + const response = await fetch(`${BASE_URL}/category/${category}/menu`); + return response.json(); + }, +}; + function App() { // 메뉴가 여러개 이므로, 배열로서 초기화함 this.menu = { @@ -30,12 +37,13 @@ function App() { }; this.currentCategory = "espresso"; - this.init = () => { - // 로컬스토리지에 1개 이상의 데이터가 있다면, 있는 메뉴를 this.menu에 가져옴 - if (store.getLocalStorage()) { - this.menu = store.getLocalStorage(); - } + + this.init = async () => { + this.menu[this.currentCategory] = await MenuApi.getAllMenuByCategory( + this.currentCategory + ); render(); + initEventListeners(); }; @@ -91,36 +99,16 @@ function App() { "Content-Type": "application/json", }, body: JSON.stringify({ name: menuName }), - }) - .then((response) => { - return response.json(); - }) - .then((data) => { - console.log(data); - }); - - await fetch(`${BASE_URL}/category/${this.currentCategory}/menu`) - .then((response) => { - return response.json(); - }) - .then((data) => { - console.log(data); - this.menu[this.currentCategory] = data; - render(); - $("#menu-name").value = ""; - }); - - // 객체로서 담음 - // this.menu[this.currentCategory].push({ name: menuName }); - - // store라는 객체에 setLocalStorage 데이터를 담음 - // store.setLocalStorage(this.menu); + }).then((response) => { + return response.json(); + }); - // 리스트에 새로운 메뉴를 추가 (기존 내용을 덮어쓰지 않도록 insertAdjacentHTML 사용) - // $("#menu-list").insertAdjacentHTML("beforeend", menuItemTemplate(menuName)); + this.menu[this.currentCategory] = await MenuApi.getAllMenuByCategory( + this.currentCategory + ); - // render(); - // $("#menu-name").value = ""; + render(); + $("#menu-name").value = ""; }; const updatedMenuName = (e) => { From 7445cb09fb3a2e945614cde6a9fc274f48dc56dd Mon Sep 17 00:00:00 2001 From: "misung.dev" Date: Wed, 6 Nov 2024 01:14:32 +0900 Subject: [PATCH 2/9] =?UTF-8?q?Feat:=2034.=20MenuApi=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20-=20=EB=A9=94=EB=89=B4=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EB=A6=AC=ED=8C=A9=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/js/index.js" | 33 +++++++++++-------- 1 file changed, 19 insertions(+), 14 deletions(-) diff --git "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" index 1ad82c9..97ab338 100644 --- "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" +++ "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" @@ -2,7 +2,7 @@ import { $ } from "./utils/dom.js"; import store from "./store/index.js"; // TODO 서버 요청 부분 // - [x] 웹 서버를 띄운다. -// - [] 서버에 새로운 메뉴명이 추가될 수 있도록 요청한다. +// - [x] 서버에 새로운 메뉴명이 추가될 수 있도록 요청한다. // - [] 서버에 카테고리별 메뉴리스트를 불러온다. // - [] 서버에 메뉴가 수정 될 수 있도록 요청한다. // - [] 서버에 메뉴의 품절상태를 토글될 수 있도록 요청한다. @@ -24,6 +24,19 @@ const MenuApi = { const response = await fetch(`${BASE_URL}/category/${category}/menu`); return response.json(); }, + + async createMenu(category, name) { + const response = await fetch(`${BASE_URL}/category/${category}/menu`, { + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name }), + }); + if (!response.ok) { + console.error("에러발생"); + } + }, }; function App() { @@ -92,17 +105,7 @@ function App() { } const menuName = $("#menu-name").value; - - await fetch(`${BASE_URL}/category/${this.currentCategory}/menu`, { - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ name: menuName }), - }).then((response) => { - return response.json(); - }); - + await MenuApi.createMenu(this.currentCategory, menuName); this.menu[this.currentCategory] = await MenuApi.getAllMenuByCategory( this.currentCategory ); @@ -173,14 +176,16 @@ function App() { addMenuName(); }); - $("nav").addEventListener("click", (e) => { + $("nav").addEventListener("click", async (e) => { const isCategoryButton = e.target.classList.contains("cafe-category-name"); - // 예외처리 if (isCategoryButton) { const categoryName = e.target.dataset.categoryName; this.currentCategory = categoryName; $("#category-title").innerText = `${e.target.innerText} 메뉴 관리`; + this.menu[this.currentCategory] = await MenuApi.getAllMenuByCategory( + this.currentCategory + ); render(); } }); From 3b4025f5b450df1e200cec29de4bbafc688bb229 Mon Sep 17 00:00:00 2001 From: "misung.dev" Date: Wed, 6 Nov 2024 01:25:34 +0900 Subject: [PATCH 3/9] =?UTF-8?q?Feat:=2035.=20MenuApi=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20-=20=EB=A9=94=EB=89=B4=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" | 33 +++++++++++++++---- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" index 97ab338..42b860f 100644 --- "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" +++ "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" @@ -37,6 +37,23 @@ const MenuApi = { console.error("에러발생"); } }, + + async updateMenu(category, name, menuId) { + const response = await fetch( + `${BASE_URL}/category/${category}/menu/${menuId}`, + { + method: "PUT", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ name }), + } + ); + if (!response.ok) { + console.error("에러발생"); + } + return response.json(); + }, }; function App() { @@ -63,8 +80,10 @@ function App() { const render = () => { // 메뉴별로 마크업을 하기 위해 map이라는 메서드 사용 const template = this.menu[this.currentCategory] - .map((menuItem, index) => { - return `
  • + .map((menuItem) => { + return `
  • ${ menuItem.name } @@ -114,16 +133,16 @@ function App() { $("#menu-name").value = ""; }; - const updatedMenuName = (e) => { + const updatedMenuName = async (e) => { // data 속성을 부여한 후, dataset이라는 속성으로 접근 가능 const menuId = e.target.closest("li").dataset.menuId; const $menuName = e.target.closest("li").querySelector(".menu-name"); const updatedMenuName = prompt("메뉴명을 수정하세요", $menuName.innerText); - this.menu[this.currentCategory][menuId].name = updatedMenuName; - // 데이터를 변경하는 것은 최소한으로 해야함. 여러군데서 데이터를 변경할 수 있으면, 데이터 상태가 꼬일 수 있음 - // localStorage.setItem(this.menu) X - store.setLocalStorage(this.menu); + await MenuApi.updateMenu(this.currentCategory, updatedMenuName, menuId); + this.menu[this.currentCategory] = await MenuApi.getAllMenuByCategory( + this.currentCategory + ); render(); }; From 44169b34c6f42b549e7113ae131d1f0394fd8b62 Mon Sep 17 00:00:00 2001 From: "misung.dev" Date: Wed, 6 Nov 2024 01:37:02 +0900 Subject: [PATCH 4/9] =?UTF-8?q?Feat:=2036.=20MenuApi=20=EA=B0=9D=EC=B2=B4?= =?UTF-8?q?=20=EB=B6=84=EB=A6=AC=20-=20=ED=92=88=EC=A0=88=20=EC=B2=98?= =?UTF-8?q?=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/js/index.js" | 30 ++++++++++++++----- 1 file changed, 22 insertions(+), 8 deletions(-) diff --git "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" index 42b860f..f329504 100644 --- "a/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" +++ "b/\353\245\230\353\257\270\354\204\261/3\354\243\274\354\260\250 \354\213\244\354\212\265/src/js/index.js" @@ -3,9 +3,9 @@ import store from "./store/index.js"; // TODO 서버 요청 부분 // - [x] 웹 서버를 띄운다. // - [x] 서버에 새로운 메뉴명이 추가될 수 있도록 요청한다. -// - [] 서버에 카테고리별 메뉴리스트를 불러온다. -// - [] 서버에 메뉴가 수정 될 수 있도록 요청한다. -// - [] 서버에 메뉴의 품절상태를 토글될 수 있도록 요청한다. +// - [x] 서버에 카테고리별 메뉴리스트를 불러온다. +// - [x] 서버에 메뉴가 수정 될 수 있도록 요청한다. +// - [x] 서버에 메뉴의 품절상태를 토글될 수 있도록 요청한다. // - [] 서버에 메뉴가 삭제될 수 있도록 요청한다 // TODO 리팩터링 부분 @@ -54,6 +54,19 @@ const MenuApi = { } return response.json(); }, + + async toggleSoldOutMenu(category, menuId) { + const response = await fetch( + `${BASE_URL}/category/${category}/menu/${menuId}/soldout`, + { + method: "PUT", + } + ); + if (!response.ok) { + console.error("에러발생"); + } + return response.json(); + }, }; function App() { @@ -84,7 +97,7 @@ function App() { return `
  • - ${ + ${ menuItem.name }