자판기 프로그램 - 사용자Ver.(javascript)

✔ 계기

인턴 생활 때, 스터디 할 때 진행했던 프로젝트이다.
같은 프로젝트를 만들어보고 코드 리뷰하는 시간을 가져 서로의 코드를 공유하고 부족한 점은 배우려고 시작했었다.

⚙ 사용자 Ver. 기능

👆. 금액 투입
- 화폐 단위(100원, 500원,1000원,5000원,10000원)로만 투입가능
ex) 한 번에 1700원 투입안됨 -> 100원 따로 두 번 500원 따로 천 원 따로 투입해야함

✌. 고장 문의
- 버튼 클릭 시 관리자 번호로 연락

👆✌. 상품 구매
- 구매 가격 이상 투입했을 시, 상품 가격 앞에 빨간불 들어옴.
- 재고 없을 시, 구매버튼비활성화
ex) 2000원을 넣어도 1500원짜리 콜라가 재고가 없으면, 빨간불은 들어오지만 구매버튼은 비활성화되어있어 구매할 수 없음.
- 구매 성공 시 투입 금액에서 상품 금액 차감.

✌✌. 잔돈 반환
- 화폐 단위가 몇 개 반환되었는지 경고창으로 알림
ex) 1700원 반환
-> 1000원 한 개, 500원 한 개, 100원 두 개 반환되었습니다.

📺 금액 투입/구매/잔돈 반환 성공 화면

📺 고장 문의 클릭 시

• 관리자에게 전화하도록 연결

📺 금액 투입 실패 화면

• 화질이 깨져서 안보이지만 129원 투입

✏ vendingMachine.js

$(document).ready(function(){
	var $10, $5, $1, c5, c;
	var moneyArr = ['10000', '5000', '1000', '500', '100'];
	var money = 0;
	var arrP = new Array();
	
	var db = openDatabase("vendingMachine", "1.0", "vendingmachine process", 2*1024*1024);
	
	/** 함수 SECTION */
	function insertM(){
		var $insertM = $('#inpMoney').val();
		var $totalM = $('#totalMoney');
		if(moneyArr.indexOf($insertM) > -1){
			money = money + Number.parseInt($insertM);
			var arr =[money];
			$totalM.text(arr.toLocaleString() + "원");
			$('#inpMoney').val('');
		}else{
			alert('투입 금액이 화폐 단위와 다릅니다.\n다시 금액을 투입하세요.');
			$('#inpMoney').val('');
		}
	}
	
	function returnM(){
		var $totalM = money;
		var msg = '';
		while($totalM != 0){
			if($totalM >= 10000){
				$10 = Number.parseInt($totalM / 10000);
				msg = "10000원 " + $10 + "개 ";
				$totalM = $totalM % 10000
			}else if($totalM >= 5000){
				$5 = Number.parseInt($totalM / 5000);
				msg = msg + "5000원 " + $5 + "개 ";
				$totalM = $totalM % 5000;
			}else if($totalM >= 1000){
				$1 = Number.parseInt($totalM / 1000);
				msg = msg + "1000원 " + $1 + "개 ";
				$totalM = $totalM % 1000;
			}else if($totalM >= 500){
				c5 = Number.parseInt($totalM / 500);
				msg = msg + "500원 " + c5 + "개 ";
				$totalM = $totalM % 500;
			}else if($totalM >= 100){
				c = Number.parseInt($totalM / 100);
				msg = msg + "100원 " + c + "개";
				$totalM = $totalM % 100;
			}
		}
		money = 0;
		alert(msg + " 반환되었습니다.");
		$('#totalMoney').text('0');
		able();
	}
	
	//화면에 db내용 뿌리기 위한 select부분
	function select(){
		db.transaction(function(tx){
			var query = "select name,price,image,stock from goods";
			
			$("#japangi li").not(":first").remove();
			tx.executeSql(query,[], function(tx,result){
				if(result.rows.length == 0){
					$('.record:eq(0)').hide();
					alert("등록된 상품이 존재하지 않습니다.");
				}else{
					for(var i = 0; i < result.rows.length; i++){
						$('.record:eq(0)').show();
						var $appendLi = $('.record:first').clone(true);
						$appendLi.attr('no' , i+1);
	
						$($appendLi.children()[0]).attr('src', "../images/" + result.rows[i].image);
						$($appendLi.children()[1]).text(result.rows[i].name);
						arrP[i] = [Number.parseInt(result.rows[i].price)];
						var arr = [Number.parseInt(result.rows[i].price)];
						$appendLi.find('.price').attr('num', i + 1);
						$appendLi.find('.price').text(arr.toLocaleString() + "원");
						$($appendLi.find('button')).attr('cnt' , result.rows[i].stock);
						
						$('.record:eq(0)').hide();
						$('#japangi').append($appendLi);	
					}
					able();	
				}
			},function(e){
					console.log(e);
			});
		});
	}	
	
	function able(){
		for(var i = 0; i < arrP.length; i++){
			if(money >= Number(arrP[i].toString())){
				$($('.price')[i + 1]).addClass('on');
				//재고없을 때, 구매버튼 비활성화				
				if($($('.priceWrap > button')[i + 1]).attr('cnt') == '0')
					$($('.priceWrap > button')[i+1]).attr('disabled', true);
				else
					$($('.priceWrap > button')[i + 1]).attr('disabled', false);
			}else{
				$($('.price')[i + 1]).removeClass('on');
				$($('.priceWrap > button')[i+1]).attr('disabled', true);
			}
		}
	}
	
	function stockReduce(pos){
		db.transaction(function(tx){
			var query = "update goods set stock= stock-1 where goodsNo=?";
			tx.executeSql(query,[pos], function(tx){
			},function(e){
				console.log(e);
			});
		});	
	}
	
	/* 초기화면 세팅 */
	select();
	
	/* EVENT SECTION */
	$('#btnRefund').click(function(){
		returnM();
	})
	$('#inpMoney').keydown(function(key){
		if(key.keyCode == 13){
			insertM();
			able();	
		}
	})
	$('#btnInsertCoin').click(function(key){
		insertM();
		able();
	})
	$("#btnError").click(function(){
		window.location.href = 'tel:010-XXXX-XXXX';
	})
	$('.priceWrap > button').click(function(e){
		var choice = confirm($(this).parent().siblings('.prodNm').text() + '를 구매하시겠습니끼?');
		if(choice){
			alert('해당 상품을 정상 구입하였습니다.');
			var pos = $(this).siblings('.price').attr('num');
			var arr = [money - arrP[pos-1]];
			money = money - arrP[pos-1];
			$('#totalMoney').text(arr.toLocaleString() + "원");
			stockReduce(pos);
			select();
		}
	})
})