(React_9기)사전캠프 5주차 - 금

4주차와 5주차는 시험기간이라 팀 활동에 참여를 잘 못하고 코딩테스트만 간간히 풀었네요...

그래도 마지막 팀 프로젝트에는 참여할 수 있어서 너무 다행이었습니다...!

이번에 팀  프로젝트로 스타벅스 주문 시스템 구현해봤습니다.

🥤스타벅스 주문 시스템

 

저는 todo-1을 제외한 js와 주문 내역 부분 css를 맡아서 했습니다...ㅎㅎ

 

1. 주문 추가

menuContainer.addEventListener('click', (event) => {
        if (event.target.tagName === 'BUTTON') {
            let addMenu = menu[event.target.getAttribute('data-index')];
            if (order[addMenu.name] === undefined) {
                order[addMenu.name] = {
                    price: addMenu.price,
                    quantity: 1,
                };
            } else {
                order[addMenu.name].quantity += 1;
            }
            totalPrice += addMenu.price;
        }
        console.log(order);
        updateOrderList();
    });

 

맨 처음에 order라는 배열에 예를 들어 아메리카노가 들어있지 않으면 추가해줍니다.
만약 아메리카노가 이미 있다면 수량만 늘려주는 식으로 구현했습니다.

2. 주문 내역

    function updateOrderList() {
        orderList.innerHTML = '';
        for (let itemName in order) {
            const orderItem = order[itemName];
            const menuItem = menu.find((item) => item.name === itemName);
            const orderItemElement = document.createElement('li');
            orderItemElement.innerHTML = `
              <div class="item-order">
              <img class="item-img" src="${menuItem.image}" alt="${itemName}">
              <div class="item-info">
                  <div>${itemName}</div>
                  <div>￦${orderItem.price.toLocaleString()}</div>
                  <div class="item-quantity">
                      <button class="quantity-down" data-item="${itemName}">-</button>
                      ${orderItem.quantity}
                      <button class="quantity-up" data-item="${itemName}">+</button>
                  </div>
              </div>
          </div>
          `;
            orderList.appendChild(orderItemElement);
        }
        totalPriceElement.textContent = totalPrice.toLocaleString();
    }

 

기본 양식에서 추가된 부분은 주문 내역에서도 수량 변경이 가능하게 만들었고 메뉴 이미지도 들어가도록 구현했습니다.

3.  주문 내역 삭제

orderList.addEventListener('click', (event) => {
        const itemName = event.target.getAttribute('data-item');
        console.log(order);
        if (event.target.classList.contains('quantity-up')) {
            console.log('up');
            order[itemName].quantity += 1;
            totalPrice += order[itemName].price;
            updateOrderList();
        } else if (event.target.classList.contains('quantity-down')) {
            if (order[itemName].quantity === 1) {
                console.log('delete');
                totalPrice -= order[itemName].price;
                delete order[itemName];
            } else {
                console.log('down');
                order[itemName].quantity -= 1;
                totalPrice -= order[itemName].price;
            }
            updateOrderList();
        }
    });

 

기존에 있던 삭제 버튼 대신에 +와 -버튼을 통해 수량 조절을 가능하게 만들었기 때문에 이 로직 또한 변경해주었습니다.

기존 로직은 메뉴를 삭제하는 버튼이었기 때문에 수량이 1인 상태에서 -를 눌렀을 경우에 그대로 넣어주었습니다.

 

---

 

KPT 회고

 

1. Keep

• 팀 프로젝트를 진행하기 전에 회의를 통해 역할을 분담
• 모르는 부분이 있으면 화면 공유를 통해 알아가기

2. Problem

• 팀원마다 학습을 하는 데 속도가 있는데 무작정 프로젝트를 하려 하니 문제가 생김

3. Try

• 학습 속도가 빠른 사람은 학습을 다 마친 뒤 내용 정리 후 알려줌
• 널널한 시간...