PC에서 웹 결제 프로그램을 이용하다보면 많이 보게 되는 숫자 키패드는 생각보다 간단하게 만들 수 있다. 물론 PG사 특성상 보안 프로그램으로 2중 체크하여 처리하겠지만 보안 프로그램을 제외한다면 별반 다를것 없이 제작할 수 있다. 

이번에 소개할 웹 프로그램은 PHP 와 JQUERY 를 이용하여 만든 안전 숫자 키패드 프로그램으로 간단하게 만들었기때문에 구조만 잘 판단하여 좀더 확장된 프로그램을 만들 수 있을거라 생각한다. 

우선 간단하게나마 안전 숫자 키패드 프로그램에 대해 설명하자면 아래와 같다.

<?php 

// -> 키값 정의
$arr_num = range(0,9);
shuffle($arr_num);
$arr_key = array();
foreach($arr_num as $k=>$v){
	$secure_num = md5(session_id().$v);
	$arr_key[$secure_num] = $v;
}

// -> 입력값이 있을 경우 
if( !empty($_POST['secureKey'])){
	$rv_arr_key = explode(",",$_POST['secureKey']);
	$rv_arr_num = array();
	foreach($rv_arr_key as $k=>$v){
		$rv_arr_num[] = $arr_key[$v];
	}
	$pw = implode("",$rv_arr_num);
	echo '<h1>입력된 비밀번호: '.$pw.'</h1>';
	echo '<hr/>';
	echo '<a href="keypad.php">다시입력</a>';
	exit;
}

// -> 키패드 생성
echo '<input type="password" name="pw" value="" placeholder="키패드를 이용하여 입력해 주세요." autocomplete="new-password" disabled/>';
echo '<ul>';
for($i=0;$i<12; $i++){
	$each = array();

	if( $i != 0 && $i%3 == 0){ echo '</ul><ul>'; }
	if(in_array($i, array(9))){ echo '<li><a class="null" >　</a></li>';continue;}
	if(in_array($i, array(11))){ echo '<li><a class="delete off" href="#none" onclick="return false;" >←</a></li>';continue;}
	$each = each($arr_key);
	echo '<li><a class="key" href="#none" onclick="return false;" data-key="'.$each['key'].'" data-num="'.$each['value'].'">'.$each['value'].'</a></li>';
}
echo '</ul>';
echo '<a href="#none" onclick="return false;" class="submit">전송</a>';
?>

<!-- jquery 3.5.1 -->
<script src="//code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 

<!-- script -->
<script>
	// -> 배열 초기화 (입력키값, 입력숫자)
	var inputKey = new Array();
	var inputNum = new Array();

	// -> 키값 클릭 이벤트
	$(document).on('click','a.key',function(e){
		var thisData = $(this).data();
		inputKey.push(thisData.key);
		inputNum.push(thisData.num);
		padInit();
	});

	// -> 키값 삭제 이벤트
	$(document).on('click','a.delete.on',function(e){
		var index = inputKey.length-1
		inputKey.pop(inputKey[index]);
		inputNum.pop(inputNum[index]);
		padInit();
	});

	// -> 키값 전송 이벤트
	$(document).on('click','a.submit',function(e){
		submit();
		
	});

	// -> 키값 갱신 함수
	function padInit(){
		var $delete = $('a.delete');
		if( inputKey.length > 0){
			$delete.removeClass('off');
			$delete.addClass('on');
		}
		else{
			$delete.addClass('off');	
			$delete.removeClass('on');	
		}
		
		var $pw = $('input[name="pw"]');
		$pw.val(inputNum.join(''));
	}

	// -> 키값 전송 함수
	function submit()
	{	
		var $pw = $('input[name="pw"]');
		var secureKey = inputKey.join(',');

		var form = $('<form></form>');
		form.attr("name","form");
		form.attr("method","post");
		form.attr("action","keypad.php");
		form.append($('<input />',{type:'hidden',name:'secureKey', value:secureKey}));
		form.appendTo('body');
		form.submit();
	}
</script>

<!-- css style -->
<style>
	*{
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
     word-break: break-all;
	}
	input{ width:50%; margin:30px 0; padding:50px; font-size:30px; }
	a{ text-decoration: none;; display: inline-block;  text-align:center; width:100%; line-height: 80px;; font-size: 30px; font-weight:900;  color:#333;}
	a:active{ color:#fff; background: #95afc9; }
	a.null{ background:#eee;}
	a.delete.off{ background:#eee; color:#999;}
	a.delete.off:active{background:#eee; color:#999;}
	a.submit{ width:50%; border:solid 1px #333; margin-top:30px; }
	ul{ margin:0; padding:0; clear:both; display:table; border-collapse:collapse; width:50%; }
	ul li{ margin:0;padding:0;float: left; list-style:none; border:solid 1px #366;display:table-cell; width:33.3%;}
	ul > li { margin-top:-1px; margin-right:-1px;}
</style>

참고로 프로그램 및 CSS를 이용한 디자인을 좀더 신경 쓰고 싶었지만 라이브러리 제공 목적이 아니기에 간단한 실습 자료수준으로 제작을 하였으니 참고 하여 커스텀 하길 바란다.