템플릿 예제

https://chry8822.github.io/BrushUp-Study/VendingMC/index.html

figma.com/file/Gn6gQJdYwImYsEYSzBXhud/멋사_프론트엔드스쿨?node-id=31%3A1214

요구사항

1. 디자인을 최대한 똑같이 만들 것
2. 자판기 잔액은 기본적으로 0원으로 시작, 소지금은 25,000으로 시작해야 한다.
3. 거스름돈 반환을 누르면 잔액의 값이 내 소지금으로 들어와야 한다.
4. 입금액 입력하여 입금하면 잔액이 추가되어야 한다. 소지금에서 차감되어야하고 소지금보다 높은금액은 당연히 입금할 수 없다.
5. 콜라의 이미지가 포함되어있는 버튼을 클릭하면 잔액이 차감되며 가장 하단의 리스트에 클릭한 콜라가 추가되어야한다. 같은 콜라가 이미 있을 시 수량 증가
6. 품절은 하나 존재하고 클릭했을 때 아무 반응도 없으면 된다.
7. 획득을 누르면 자판기 하단에 있는 모든 콜라들이 획득한 음료칸으로 들어오게된다.
8. 총금액은 획득한 음료의 가격들의 총합이다.
9. 획득 전 장바구니에 담은 음료들을 클릭하면 선택이 취소된다.

2차 과제

1. 기능
   1. 자판기의 전용 재화를 만들기
      1. 용어는 콜라코인
         1. 비율은 900원에 1코인
   2. 입금액에 입력하는 input은 그대로 놓고 입금 버튼을 소지금 입금버튼과 코인입금버튼으로 나눈다.
      1. 코인은 입금과 동시에 원으로 환전되고, 그 비율은 1000원에 1코인이다.
   3. 자판기에 돈을 입금할 때 음수의 값을 밸리데이션 체크하시오.
   4. 자판기 장바구니 안에 있는 음료들의 개수를 수정할 수 있게 하시오.
      1. 개수를 수정했을 때 가격들은 수정해야하고 당연히 개수가 높아져 잔액으로 감당이안되면 alert를 띄어야 한다.
   5. 음료수를 드래그해서 자판기안 영역에다가 드롭한다면 음료수를 클릭하는 것과 같이하라.
   6. 잔액이 부족할 경우 얼마가 부족한지 보여주시오.
   7. 만원 이상 구매했을 때 15% 금액을 적용하시오.
   8. 단 콜라의 height 값은 유지되어야하고 그안에서 스크롤을 통해서 볼 수 있어야 한다.
2. 음료수말고 음식들을 추가하시오. (가격 달라야 함)
3. UI
   1. 모든 금액에 대한 숫자에 , 를 추가하라.
   2. 자판기 안(장바구니)에있는 음료들의 총 가격값을 표시하시오.
   3. 자판기 안에 있는 음료들의 반환버튼을 따로 만들어라.
   4. 품절된 상품을 클릭하고 있을 때 원본과 동일하게 만드시오.
   5. 내 인벤토리의 총 금액은 0원으로 표시하라.
   6. favicon 을 적용해보시오. (음료 아무거나)