게임/피파온라인4

피파온라인 수수료계산기 코드리뷰(Code Review) 및 설명

🐻곰이🐻 2022. 10. 4.

728x90

안녕하세요 곰이에요!

오늘 잠깐 심심해서 만들어본 피파온라인 수수료 계산기 코드 리뷰 및 설명을 해볼까 합니다.

이런 게 제 블로그에서는 처음이라 잘 설명할 수 있을지 모르겠네요 ㅎㅎ

[피파온라인4] 피파온라인 수수료계산기 심심해서 만들어봄

안녕하세요 곰이에요 :) 오늘은 JS/JQ로 피파온라인 4 수수료 계산기 간단하게 만들어봤습니다. 참고 사이트 https://fifaonline4.nexon.com/common/calculator EA SPORTS™ FIFA ONLINE 4 fifaonline4.nexon.com 만들고 나서

easy-developmentbear.tistory.com

작동은 위에 포스팅 타시면 보실 수 있습니다.

고안한 이유

이유는 딱히 없어요 그냥 한번 해볼까 해서 끄적이면서 만든 겁니다.

전체 소스

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>피파 수수료 계산기</title>
</head>
<script src="/js/jquery-3.4.1.min.js"></script>
<script src="/js/jquery_ui/jquery-ui.min.js"></script>
<script>
//input에 숫자만 입력받기
function isNum()
{
	if ((event.keyCode >= 45 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8|| event.keyCode==13 || event.keyCode==9) return true;
	else return false;
}

//천 단위 콤마 찍어 출력하기
function number_format(val)
{
	var val_in = val.toString().split(".");
	val_in[0] = val_in[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
	val_in = val_in.join(".");

	return val_in;
}

//데이터 가져오기
function get_data(double) 
{
	//입력 가격
	var put_bp = double.toString();
	
	//int형으로 1000과 비교.
	if(parseInt(put_bp) < 1000 && put_bp.length != 0)
	{
		alert("1,000(천)BP이상의 값을 입력해 주세요.");
		$("#bp_01").val(""); //지우기
		$("#bp_01").focus(); //포커스 해주기
		return false; //실행중지
	}

	//기본수수료 40% 제외한 금액
	var minus_bp = (put_bp * 40 / 100);
	
	//최종 받는금액 넣어주기
	var real_bp = (put_bp - minus_bp);
	
	//쿠폰 설정값이 있는지?
	if($("#use_coupon").val())
	{
		//선택한 쿠폰%에 따라 게산
		var su_per = (minus_bp * $("#use_coupon").val() / 100);
		
		//최종금액에 할인되는금액 합치기
		real_bp = real_bp + su_per;
		
		//쿠폰으로 할인받는금액 콤마찍기 작업
		var coupon_in = number_format(su_per);

		//할인받는금액 넣어주기
		$("#coupon_bp").text(coupon_in);

		//퍼센트율에 따른 표기
		$("#per").text($("#use_coupon").val());
	}

	// topClass or primium pc 둘중하나라도 Y일때
	if($("#top_class:checked").val() == "Y" && $("#primium_pc:checked").val() == "Y")
	{
		// 탑클래스는 수수료 대비 20% 할인
		var top_class = (minus_bp * 20 / 100);

		// 프리미엄 pc방은 수수료 대비 30% 할인
		var pc_class = (minus_bp * 30 / 100);
		
		//둘 다 이기때문에 둘이 할인한 금액을 합쳐준다.
		var top_pc = parseInt(top_class)+parseInt(pc_class);
		
		//개별 할인금액에 따른 콤마찍기.
		var top_in = number_format(top_pc);
		
		//최종 받을금액 + 탑클래스 할인금액 합산
		real_bp = real_bp + top_pc;

		$("#class_bp").text(top_in);
	}
	else
	{
		//탑클래스만 일때
		if($("#top_class:checked").val() == "Y")
		{
			//탑클래스 퍼센트율 계산
			var top_class = (minus_bp * 20 / 100);

			//콤마 찍기
			var top_in = number_format(top_class);

			//받을금액 + 할인받은금액 합산
			real_bp = real_bp + top_class;

			//개별할인금액에 표기
			$("#class_bp").text(top_in);
		}
		
		//프리미엄 pc방일때
		if($("#primium_pc:checked").val() == "Y")
		{
			//피씨방 퍼센트율 계산
			var pc_class = (minus_bp * 30 / 100);

			//콤마 찍기
			var pc_in = number_format(pc_class);

			//받을금액 + 할인받은금액 합산
			real_bp = real_bp + pc_class;

			//개별할인금액에 표기
			$("#class_bp").text(pc_in);
		}

		//둘 다 N일때
		if($("#top_class:checked").val() == "N" && $("#primium_pc:checked").val() == "N")
		{
			//0으로 표기
			$("#class_bp").text(0);
		}
	}

	//콤마 작업
	var put_in		= number_format(put_bp);	//입력한 값.
	var minus_in	= number_format(minus_bp);	//수수료 값.
	var total_in	= number_format(real_bp);	//최종 받을금액 값.

	//구한 값 넣기
	$("#bp_01").val(put_in);
	$("#default_bp").text(minus_in);
	$("#total_bp").text(total_in);
}

//콤마 제거하기
function comma_less(amount, id)
{
	var set_bp = $("#"+id).val(amount.replace(/,/g, ''));
	return set_bp;
}

//계산된 BP구하기
function get_bp()
{
	//기본 수수료 값
	var default_bp = $("#bp_01").val().replace(/,/g, '');

	//기본수수료 40% 제외한 금액
	var minus_bp = (default_bp * 40 / 100);

	//최종 받는금액 넣어주기
	var real_bp = (default_bp - minus_bp);

	var bp = $("#default_bp").text().replace(/,/g, '');
	var su_per = (bp * $("#use_coupon").val() / 100);
	var re_total = parseInt(real_bp) + parseInt(su_per);

	// topClass or primium pc 둘중하나라도 Y일때
	if($("#top_class:checked").val() == "Y" && $("#primium_pc:checked").val() == "Y")
	{
		// 탑클래스는 수수료 대비 20% 할인
		var top_class = (minus_bp * 20 / 100);

		// 프리미엄 pc방은 수수료 대비 30% 할인
		var pc_class = (minus_bp * 30 / 100);
		
		//둘 다 이기때문에 둘이 할인한 금액을 합쳐준다.
		var top_pc = parseInt(top_class)+parseInt(pc_class);
		
		//개별 할인금액에 따른 콤마찍기.
		var top_in = number_format(top_pc);
		
		//최종 받을금액 + 탑클래스 할인금액 합산
		re_total = re_total + top_pc;

		$("#class_bp").text(top_in);
	}
	else
	{
		//탑클래스만 일때
		if($("#top_class:checked").val() == "Y")
		{
			//탑클래스 퍼센트율 계산
			var top_class = (minus_bp * 20 / 100);

			//콤마 찍기
			var top_in = number_format(top_class);

			//받을금액 + 할인받은금액 합산
			re_total = re_total + top_class;

			//개별할인금액에 표기
			$("#class_bp").text(top_in);
		}
		
		//프리미엄 pc방일때
		if($("#primium_pc:checked").val() == "Y")
		{
			//피씨방 퍼센트율 계산
			var pc_class = (minus_bp * 30 / 100);

			//콤마 찍기
			var pc_in = number_format(pc_class);

			//받을금액 + 할인받은금액 합산
			re_total = re_total + pc_class;

			//개별할인금액에 표기
			$("#class_bp").text(pc_in);
		}
		
		//둘 다 N일때
		if($("#top_class:checked").val() == "N" && $("#primium_pc:checked").val() == "N")
		{
			//0으로 표기
			$("#class_bp").text(0);
		}
	}

	//쿠폰수수료 할인금액 설정
	var coupon_in = number_format(su_per);
	
	//최종금액 재 설정
	var re_total_in = number_format(re_total);
	
	//쿠폰 차감금액 넣기
	$("#coupon_bp").text(coupon_in);
	
	//최종금액 넣기
	$("#total_bp").text(re_total_in);

	//쿠폰할인율 넣기
	$("#per").text($("#use_coupon").val());
}

</script>
<body>
	<div class="bp_layer">
		<b>판매 예정금액</b>
		<input type="text" name="bp_01" id="bp_01" onkeydown="return isNum();" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');" onblur="get_data(this.value);" onfocus="comma_less(this.value, 'bp_01')" maxlength="15"><b> BP</b>
		<select id="use_coupon" onchange="get_bp();">
			<option value="">쿠폰 선택</option>
			<option value="5">5%</option>
			<option value="10">10%</option>
			<option value="15">15%</option>
			<option value="20">20%</option>
			<option value="25">25%</option>
			<option value="30">30%</option>
			<option value="35">35%</option>
			<option value="40">40%</option>
			<option value="45">45%</option>
			<option value="50">50%</option>
		</select>
	</div>
	<br>
	<div>
		<b>TOP CLASS 기본수수료 20% 할인</b>
		<span>보유</span><input type="radio" id="top_class" name="top_class" value="Y" onchange="get_bp();">
		<span>미보유</span><input type="radio" id="top_class" name="top_class" value="N" onchange="get_bp();" checked>
		<br>
		<br>
		<b>프리미엄 PC방 기본수수료 30% 할인</b>
		<span>사용</span><input type="radio" id="primium_pc" name="primium_pc" value="Y" onchange="get_bp();">
		<span>미사용</span><input type="radio" id="primium_pc" name="primium_pc" value="N" onchange="get_bp();" checked>
	</div>
	<br>
	<div>
		<b>기본 수수료 (40%)</b> : -<b id="default_bp">0</b><b> BP</b>
		<br>
		<br>
		<b>수수료 할인 금액 (총 </b><b id="per">0</b> <b>% 할인)</b> : <b id="coupon_bp">0</b><b> BP</b>
		<br>
		<br>
		<b>개별 할인 금액</b> : <b id="class_bp">0</b><b> BP</b>
		<br>
		<br>
		<b>최종 받는 금액</b> : <b id="total_bp">0</b><b> BP</b>
	</div>
</body>
</html>

중요했던 부분

아마도 입력값을 받아오는

<b>판매 예정금액</b>
<input type="text" name="bp_01" id="bp_01" onkeydown="return isNum();" onkeyup="this.value=this.value.replace(/[^0-9]/g,'');" onblur="get_data(this.value);" onfocus="comma_less(this.value, 'bp_01')" maxlength="15"><b> BP</b>

이 부분이 제일 중요하다고 생각해요.

이유는 input 태그에 이벤트를 굉장히 많이 걸어 둔 이유가 있습니다.

첫째는 한글, 영문이 입력이 되면 안 되었기 때문에

영문은 onkeydown 이벤트를 걸어 아래의 함수를 타게 만들었습니다.

//input에 숫자만 입력받기
function isNum()
{
	if ((event.keyCode >= 45 && event.keyCode <= 57) || (event.keyCode >= 96 && event.keyCode <= 105) || event.keyCode == 8|| event.keyCode==13 || event.keyCode==9) return true;
	else return false;
}

키가 눌렸을 때 이벤트를 발생시키는 input 태그의 이벤트 중 하나이며 해당 조건에 부합하지 않는다면 입력이 안되게 처리한 것입니다.

솔직히 이건 없어도 상관없습니다.

정규식이 있기 때문이죠.

onkeyup="this.value=this.value.replace(/[^0-9]/g,'');"

이 부분을 보시면 키를 눌렀다 떼었을 때 0~9 값만 받고 나머진 다 빈 값으로 처리하는 부분입니다.

그래서 영문, 한글 전부 다 튕겨 낼 수 있던 거죠.

위와 같이 키가 올라올 때 이벤트를 걸어 빈 값이 되게끔 처리한 것입니다. 숫자는 입력받고 나머진 빈 값으로 만듭니다.

그리고 onblur 이벤트를 사용하여 인풋 창에서 나갔을 때 또는 포커싱이 해제되었을 때 발생하는 함수로

포커싱 전까지의 입력값을 가지고 값을 구해오는 함수를 태웠습니다.

get_data()라는 함수죠.

간단히 보여드리면

이렇게 인풋 창이 비활성화될 때 콤마 찍어주는 함수를 이벤트에 걸어둔 겁니다.

//데이터 가져오기
function get_data(double) 
{
	//입력 가격
	var put_bp = double.toString();
	
	//int형으로 1000과 비교.
	if(parseInt(put_bp) < 1000 && put_bp.length != 0)
	{
		alert("1,000(천)BP이상의 값을 입력해 주세요.");
		$("#bp_01").val(""); //지우기
		$("#bp_01").focus(); //포커스 해주기
		return false; //실행중지
	}

	//기본수수료 40% 제외한 금액
	var minus_bp = (put_bp * 40 / 100);
	
	//최종 받는금액 넣어주기
	var real_bp = (put_bp - minus_bp);
	
	//쿠폰 설정값이 있는지?
	if($("#use_coupon").val())
	{
		//선택한 쿠폰%에 따라 게산
		var su_per = (minus_bp * $("#use_coupon").val() / 100);
		
		//최종금액에 할인되는금액 합치기
		real_bp = real_bp + su_per;
		
		//쿠폰으로 할인받는금액 콤마찍기 작업
		var coupon_in = number_format(su_per);

		//할인받는금액 넣어주기
		$("#coupon_bp").text(coupon_in);

		//퍼센트율에 따른 표기
		$("#per").text($("#use_coupon").val());
	}

	// topClass or primium pc 둘중하나라도 Y일때
	if($("#top_class:checked").val() == "Y" && $("#primium_pc:checked").val() == "Y")
	{
		// 탑클래스는 수수료 대비 20% 할인
		var top_class = (minus_bp * 20 / 100);

		// 프리미엄 pc방은 수수료 대비 30% 할인
		var pc_class = (minus_bp * 30 / 100);
		
		//둘 다 이기때문에 둘이 할인한 금액을 합쳐준다.
		var top_pc = parseInt(top_class)+parseInt(pc_class);
		
		//개별 할인금액에 따른 콤마찍기.
		var top_in = number_format(top_pc);
		
		//최종 받을금액 + 탑클래스 할인금액 합산
		real_bp = real_bp + top_pc;

		$("#class_bp").text(top_in);
	}
	else
	{
		//탑클래스만 일때
		if($("#top_class:checked").val() == "Y")
		{
			//탑클래스 퍼센트율 계산
			var top_class = (minus_bp * 20 / 100);

			//콤마 찍기
			var top_in = number_format(top_class);

			//받을금액 + 할인받은금액 합산
			real_bp = real_bp + top_class;

			//개별할인금액에 표기
			$("#class_bp").text(top_in);
		}
		
		//프리미엄 pc방일때
		if($("#primium_pc:checked").val() == "Y")
		{
			//피씨방 퍼센트율 계산
			var pc_class = (minus_bp * 30 / 100);

			//콤마 찍기
			var pc_in = number_format(pc_class);

			//받을금액 + 할인받은금액 합산
			real_bp = real_bp + pc_class;

			//개별할인금액에 표기
			$("#class_bp").text(pc_in);
		}

		//둘 다 N일때
		if($("#top_class:checked").val() == "N" && $("#primium_pc:checked").val() == "N")
		{
			//0으로 표기
			$("#class_bp").text(0);
		}
	}

	//콤마 작업
	var put_in		= number_format(put_bp);	//입력한 값.
	var minus_in	= number_format(minus_bp);	//수수료 값.
	var total_in	= number_format(real_bp);	//최종 받을금액 값.

	//구한 값 넣기
	$("#bp_01").val(put_in);
	$("#default_bp").text(minus_in);
	$("#total_bp").text(total_in);
}

또 포커싱(input 활성화)이 되었을 때 콤마를 찍어줬던 부분을 다시 콤마를 제거하여 값을 받아 처리하게끔 onfocus 이벤트를 주었습니다.

위와 같은 효과를 낼 수 있습니다.

위에 사용된 함수는 아래에 접은 글로 첨부하였습니다.

//콤마 제거하기
function comma_less(amount, id)
{
	var set_bp = $("#"+id).val(amount.replace(/,/g, ''));
	return set_bp;
}

또 쿠폰 선택할 때에 값이 바뀌게 설정한 건 바로 onchange 이벤트를 걸어주었기 때문입니다.

<select id="use_coupon" onchange="get_bp();">
    <option value="">쿠폰 선택</option>
    <option value="5">5%</option>
    <option value="10">10%</option>
    <option value="15">15%</option>
    <option value="20">20%</option>
    <option value="25">25%</option>
    <option value="30">30%</option>
    <option value="35">35%</option>
    <option value="40">40%</option>
    <option value="45">45%</option>
    <option value="50">50%</option>
</select>

위에 보시면 select 태그에 onchange 이벤트를 걸어 get_bp()라는 함수를 호출하게 됩니다.

아래는 get_bp() 함수입니다.

//계산된 BP구하기
function get_bp()
{
	//기본 수수료 값
	var default_bp = $("#bp_01").val().replace(/,/g, '');

	//기본수수료 40% 제외한 금액
	var minus_bp = (default_bp * 40 / 100);

	//최종 받는금액 넣어주기
	var real_bp = (default_bp - minus_bp);

	var bp = $("#default_bp").text().replace(/,/g, '');
	var su_per = (bp * $("#use_coupon").val() / 100);
	var re_total = parseInt(real_bp) + parseInt(su_per);

	// topClass or primium pc 둘중하나라도 Y일때
	if($("#top_class:checked").val() == "Y" && $("#primium_pc:checked").val() == "Y")
	{
		// 탑클래스는 수수료 대비 20% 할인
		var top_class = (minus_bp * 20 / 100);

		// 프리미엄 pc방은 수수료 대비 30% 할인
		var pc_class = (minus_bp * 30 / 100);
		
		//둘 다 이기때문에 둘이 할인한 금액을 합쳐준다.
		var top_pc = parseInt(top_class)+parseInt(pc_class);
		
		//개별 할인금액에 따른 콤마찍기.
		var top_in = number_format(top_pc);
		
		//최종 받을금액 + 탑클래스 할인금액 합산
		re_total = re_total + top_pc;

		$("#class_bp").text(top_in);
	}
	else
	{
		//탑클래스만 일때
		if($("#top_class:checked").val() == "Y")
		{
			//탑클래스 퍼센트율 계산
			var top_class = (minus_bp * 20 / 100);

			//콤마 찍기
			var top_in = number_format(top_class);

			//받을금액 + 할인받은금액 합산
			re_total = re_total + top_class;

			//개별할인금액에 표기
			$("#class_bp").text(top_in);
		}
		
		//프리미엄 pc방일때
		if($("#primium_pc:checked").val() == "Y")
		{
			//피씨방 퍼센트율 계산
			var pc_class = (minus_bp * 30 / 100);

			//콤마 찍기
			var pc_in = number_format(pc_class);

			//받을금액 + 할인받은금액 합산
			re_total = re_total + pc_class;

			//개별할인금액에 표기
			$("#class_bp").text(pc_in);
		}
		
		//둘 다 N일때
		if($("#top_class:checked").val() == "N" && $("#primium_pc:checked").val() == "N")
		{
			//0으로 표기
			$("#class_bp").text(0);
		}
	}

	//쿠폰수수료 할인금액 설정
	var coupon_in = number_format(su_per);
	
	//최종금액 재 설정
	var re_total_in = number_format(re_total);
	
	//쿠폰 차감금액 넣기
	$("#coupon_bp").text(coupon_in);
	
	//최종금액 넣기
	$("#total_bp").text(re_total_in);

	//쿠폰할인율 넣기
	$("#per").text($("#use_coupon").val());
}

쿠폰 값과 radio 값을 계산해주는 함수인데 radio에서도 같이 처리합니다.

이 부분의 onchange 이벤트도 get_bp()로 되어있습니다.

<div>
    <b>TOP CLASS 기본수수료 20% 할인</b>
    <span>보유</span><input type="radio" id="top_class" name="top_class" value="Y" onchange="get_bp();">
    <span>미보유</span><input type="radio" id="top_class" name="top_class" value="N" onchange="get_bp();" checked>
    <br>
    <br>
    <b>프리미엄 PC방 기본수수료 30% 할인</b>
    <span>사용</span><input type="radio" id="primium_pc" name="primium_pc" value="Y" onchange="get_bp();">
    <span>미사용</span><input type="radio" id="primium_pc" name="primium_pc" value="N" onchange="get_bp();" checked>
</div>

해당 onchange 이벤트가 발생하는 시점은 radio의 value값이 달라졌을 때입니다.

이렇게 클릭 시마다 변경되는 값을 가지고 계속해서 값을 다시 가져오는 패턴을 보여줍니다.

여기까지 코드 리뷰가 끝인 거 같네요 ㅎㅎ 더 궁금하신점 있으시면 댓글로 남겨주세요 ㅎㅎ

아직 많이 부족하고 보완해야 할 부분도 있지만 점차 이렇게 시도하다 보면 언젠간 괜찮아지겠죠??

만들면서 힘들었던 점

힘든 건 딱히 없지만 최대한 비슷하게 만드려고 했던 거 같아요 ㅎㅎ

하고 싶은 말

생각이 들 때 실행으로 옮기는 게 좋은 부분이 많은 것 같습니다.

연습이 목적이라면 이렇게 하나를 두고 따라 해 보시고 구현하는 것도 하나의 방법이라 생각합니다.

부족함이 많은 글 끝까지 읽어주셔서 감사합니다.

저작자표시 비영리 변경금지

'게임 > 피파온라인4' 카테고리의 다른 글

[피파온라인4] 피파온라인4 라이브 카드깡 5000장 까봤습니다 BP벌기 #5 (0)	2023.07.23
[피파온라인4] 라이브 Top Price 1,000 선수팩 1,500장 까면 얼마를 벌까? #4 #넬송세메두 사건 #피파보정 #피파BP벌기 (0)	2023.07.20
[피파온라인] 라이브 Top Price 1000선수팩 4,000장 까봤습니다. #3 (8)	2022.10.13
[피파온라인4] 돈버는법 #2 라이브 Top Price 1000선수팩 3,500장 까봤습니다. (0)	2022.10.12
[피파온라인4] 피파온라인 수수료계산기 심심해서 만들어봄 (1)	2022.10.04
[피파온라인4] 피파온라인 돈버는법 소개합니다. (0)	2022.07.18