포스기 만들기 part.1

학원에서 함께 공부하는 동기분들과 3인 1조로 조를 꾸려서 함께 포스기를 만들어보는 작은 과제를 진행했다.

 

처음엔 "뭐야 쉽겠는데? 덧셈만 있는거잖아" 라고 생각했지만.. 아주 큰 오산이었다.. 간단하게만 보았던 진행 주제를 막상 백지에서 맞닥뜨리니

호락호락하지 않았다. javascript만으로도 벅찬 상태였지만 기본적인 html , css 지식조차 없던 나에게는 DOM 역시

큰 시련이었지만 훌륭한 동기분들을 믿고 과제를 시작했다.

 

정확히 전부를 기억하지는 않지만 조가 정해지고 시작된 건 설계와 목업 작업이었다.

 

  여기서 목업이란?

<실제품을 만들어 보기 전, 디자인의 검토를 위해 실물과 비슷하게 시제품을 제작하는 작업의 프로세스, 결과물을 통칭한다.>

 

우리는 먼저 어느 부분에 메뉴가 들어갈지 , 가격이 들어갈지 기본적인 틀을 잡으면서 화면을 간단하게 선으로 나누면서 이런 모습의

첫 화면을 완성했다.

 

가장 처음 목업되었던 화면

왼쪽에는 메뉴가 오른쪽에는 클릭한 메뉴의 가격과 정보가 위치할 예정으로 만들어진 우리의 첫 화면이었다.

 

아직 초심자인 우리는 계획을 세우고 여기까지 만들고 만든 태그들을 DOM 시킬 구상까지 하고 나니 첫 수업은 끝나 있었다.

 

구현해야 할 내용들을 먼저 적어보면 크게 5가지였다.

 

1. 메뉴버튼을 누르면 중복 없이 주문창에 담기.

2. 주문창에 각 메뉴에 증가,감소,취소,수량 조절 버튼을 누르면 작동하는
    수량 증감 , 직접 수량 입력 , 취소 버튼 만들기.

3. 2번에 맞게 총 합계 가격 나타내기.

4. 결제버튼을 누르면 주문목록 초기화 하기.

5. 결제취소 버튼 누르면 결제 전 화면으로 돌아가기.

 

그리고 수업을 마치고 미적 감각과 CSS에 뛰어나신 한 동기 분께서 프론트엔드를 총책임 하시기로 하고

 

다른 동기 분께서는 DOM을 이어주는 백엔드를 맡아주셨다. 나는.. 조장을 맡아서 격려와 응원을 담당했다..

 

농담이고 나는 전반적으로 둘러보며 양 쪽 모두 돕기로 되어있었지만 생각보다 많은 양의 DOM 때문에 백엔드를 함께 맡기로 했다.

우리는 각자 열심히 코드를 짜면서 계획했던 모든 것을 코드로 옮겨보기로 약속했다.

 

백엔드를 맡은 동기와 나는 querySelector를 사용해서 html과 js를 이어주고 정해진 DOM에 효과를 주고 저장해놓은 메뉴 정보를

 

불러오는 식으로 계획을 짜고 메뉴 하나하나의 코드를 만들어보기로 했다.

 

카톡 기록에서 찾은 첫 js파일이다. 언뜻 보아도 비효율적인 코드지만 이 때는 몰랐었다. 처음 설계의 중요성을...

const ame = document.querySelector('.ame');
const latte = document.querySelector('.latte');
const mocha = document.querySelector('.mocha');

const rightVal = document.querySelector('.rightresultVal');
const listVal = document.querySelector('#listVal');
let total = document.querySelector('#totalprice');
const nopay = document.querySelector('#nopay');

function temple(coffee){

    let menu = 
    `<div class='cfmenu ` + coffee.name + `'` + `>
    <span>` + coffee.name + `</span>
    <span> ` + coffee.price + `</span>
    <button class = 'quantity'>` + coffee.quantity + `</button> 
    <button class = 'cancel'>` + '❌' + `</button>
    </div>`
    total.innerHTML = '총액 : ' + coffee.price * coffee.quantity + '원';  

    if(coffee.quantity === 1){  
    return menu;    
    }

    else if(coffee.quantity > 1){
    return `<div class='cfmenu ` + coffee.name + `'` + `>
    <span>` + coffee.name + `</span>
    <span> ` + (coffee.price = (coffee.price * coffee.quantity)) + `</span>
    <button class = 'quantity'>` + coffee.quantity + `</button> 
    <button class = 'cancel'>` + '❌' + `</button>
    </div>`
    }
}

function americano(){
    inAme.quantity++;
    inAme.price = 5000;

    listVal.innerHTML = temple(inAme);
}

function cafelatte(){
    inLatte.quantity++;
    inLatte.price = 5500;
   
    listVal.innerHTML = temple(inLatte);
}

function cafemocha(){
    inMocha.quantity++;
    inMocha.price = 6000;
   
    listVal.innerHTML = temple(inMocha);
}

ame.onclick = americano;
latte.onclick = cafelatte;
mocha.onclick = cafemocha;

part.2에서 계속 😂