포스기 만들기 part.2

그렇게 다시 일상으로 돌아와 수업과 함께 짬날 때마다 조금씩 진행이 되어가고 우리는 다시 뭉쳐서 지금까지의 진행 결과를 합쳤다.

 

참고로 우리 조 이름은 .. 그랑조였다. 물론 내 맘대로 그냥 지어버린 이름이지만 각자 역할을 맡고 합체시키는 게

 

마치 로봇 그랑죠 처럼.. 이라고 되지도 않는 핑곗거리가 하나 있다.

 

 

 

 

 

(이런 느낌으로 조 이름을 지은거임)

 

 

 

 

 

 

다시 본론으로 돌아와서 포스기의 작동원리를 생각하면서 코드를 작성하면서 부딪힌 문제들이 꽤나 있었다.

 

먼저 수량이 증가하면 기존 div 밑에 동일한 메뉴가 주문창에 담겼다. 메뉴의 중복이 가장 먼저 극복해야할 문제였고

 

다른 우리 조의 가장 큰 문제는 메뉴 하나 당 함수가 엄청나게 길었다. 처음에 설계할 때 메뉴를 변수로 두지 않은 채

코드를 작성해서 메뉴 하나마다 버튼 , 출력 양식 , 주문창에 담기 등등 엄청나게 긴 코드를 가지고 있었다.

 

기능구현은 어느정도 마친 상태였지만 아직 메뉴는 3가지 뿐인데 코드는 300줄에 육박했고 과제 발표 전 날 우리는

 

뭉쳐서 해결방법을 찾았다. 열심히 적은 코드를 지우고 다시 쓰는 일이 굉장히 속상했지만 하나하나 함수의 인자로

 

변수를 두고 객체에서 저장된 값을 불러오는 식으로 변경하기로 했다.

 

1. data 파일 안 객체에서 각 elements를 불러와서 기존 div가 아닌 매번 새로운 div를 생성하기.

   ㄴ 함수 실행 시 createElement 와 setAttribute 를 사용해서 매번 새 div와 생성자를 주었다.

       생성할 때 객체에서 정보를 불러와서 사용해서 유동적으로 사용할 수 있게 전부 변경.

if(coffee.quantity === 1){ 
       let coffeesDiv = document.createElement('div');
       coffeesDiv.setAttribute('class' , `` + coffee.name + `div`);
       coffeesDiv.innerHTML =  templete ;

 

2. 메뉴가 한 번 이상 클릭 될 때 이미 주문창에 쌓인 가격과 수량을 변경하기.

   ㄴ if문을 써서 수량이 1개일 때는 div를 생성하고 1개 이상일 경우 수량에 따라 변경된 값을 대입해서 div의  innerHTML을 
       바꿔주는 방식으로 해결. 이를 위해 객체에 있는 메뉴의 정보를 변경해야했다.

else if(coffee.quantity > 1){
      let classCoffeesDiv = document.querySelector(`.` + coffee.name + `div`);
      classCoffeesDiv.innerHTML = templete;

 

3. 저장 된 객체에서 변경된 가격과 메뉴의 정보가 출력되게 만들기.

   ㄴ console창에서 data에 객체로 저장된 각 메뉴를 호출했을 때 메뉴이름 , 원 가격 , 수량 , 수량에 따른 가격이 출력되고

       메뉴 클릭 시 객체의 값이 변경된다. 주문 창에서는 수량에 따라 data 객체의 변경된 값을 대입해서 출력해서 해결했다.

var coffees = [
  { name: '아메리카노', 
    price: 5000, 
    allPrice: 0,
    quantity: 0
  },
  { name: '카페라떼', 
    price: 5500, 
    allPrice: 0,
    quantity: 0
  }
  ]

( 객체에서 원 가격은 price로 , 수량에 따른 가격은 allPrice로 주어서 quantity 수량에 따라 allPrice를 변경해서 리턴하는 방식을 사용했다 )

 

4. 수량 증가 / 수량 감소 버튼 , 수량 직접 조절 버튼 , 취소 버튼을 생성하기.

   ㄴ 수량이 1개일 때 실행되는 함수에 같이 넣어주어서 주문창에 들어오는 동시에 모든 버튼이 생성되고 수량 관련 버튼들은

       모두 객체의 값을 바꿔주는 역할을 했다.

// 캔슬버튼은 수량을 0으로 만들고 div를 삭제.
coffee.allPrice = 0;
   coffee.quantity = 0;
   classCoffeesDiv.remove();
   
// 수량 직접 조절버튼은 0 이하는 불가능하게 조건을 주고 prompt input값을 * 해준다. 
if(Number(input) > 0){
   coffee.quantity = Number(input);
   count.innerHTML = coffee.quantity;
   coffee.allPrice = Number(input) * coffee.price;
   countP.innerHTML = coffee.allPrice
   
// 증가,감소버튼 수량을 +1 , -1로 설정.
coffee.quantity = coffee.quantity + 1;
 coffee.allPrice = coffee.price * coffee.quantity;
 
 coffee.quantity = coffee.quantity - 1;
   coffee.allPrice = coffee.price * coffee.quantity;

 

5. 결제 시 선택사항 추가하기 , 전체취소하는 창 만들기. 

  ㄴ alert창 자체를 수정할 수 없어서 어떻게 처리할 지 고민하던 찰 나 프론트엔드를 맡은 동료분께서 외부 라이브러리를 사용해서
      모달창을 따로 작성해서 해결. ( 나는 잘 이해하지 못한 부분이 많으므로 설명불가 .. 코드는 첨부 )

unction cancel(){
  swal({
      title: "주문 취소 확인",
      text: "주문 취소하시겠습니까?",
      buttons: ["취소", "확인"]
    })

    .then((willDelete) => {
      if (willDelete) {
        return clearPage();
      } 
    });
}

 

이렇게 힘을 합쳐서 함께 zoom으로 소통하며 셋이 코드를 수정하고 추가로 작성하면서 포스기는 정말 포스기 다운 구색을 갖췄다.

 

 

 

 

    첫 화면도 처음과 비교해서 css를 적용해서 훨씬 예쁜 화면이 되었다.

                          ( 프론트엔드 담당 동기분 만세 🙌)   

 

 

 

 

 

 

 

메뉴를 여러번 클릭해도 중복된 게 아닌 기존 div의 innerHTML을 수정해서

   지장없이 주문창에 저장되고 4개의 버튼들 모두 정상적으로 동작한다.

 

          ( 백엔드 담당이자 가장 친한 친구인 동기님 고생했어요🙌)

 

 

 

 

 

 

 

각 결제 방식에 맞는 모달창이 나타나고 취소 역시 2개의 버튼을 모두

컨트롤 할 수 있다. 출력 시 뒷 배경은 흐려지는 효과를 주었다.

 

 

 

 

 

 

과제물 발표를 앞두고 새벽 1시까지 함께 코드를 짜며 프론트엔드도 , 백엔드도 거의 마무리 한 채 행복하게 잠들 수 있었다.

 

part.3에서 계속 ☺️