[ Spring Boot 프로젝트 ] 포인트 로직

비대면 빨래서비스 프로그램 제작 - 주문하기

 

우리 팀은 포인트를 적립 / 사용할 수 있는 프로그램을 만들기로 계획했다

포인트 로직.. 스뭇스하게 짤 수 있을 줄 알았는데

경우의 수는 생각보다 다양했고 생각지도 못한 난관이었다

이번 파이널 프로젝트에서 테스트를 제일 많이 해본 구간. 테스트하면서 많은 구멍들을 찾았고 메웠다

 

 

▶ DB 설계

 - 관련없는 테이블정보는 지움

point 테이블을 따로만들어서

주문 시 사용포인트 / 적립 포인트 정보가 들어가도록 만들었다

 

1개의 주문 (주문번호) =>  2개의 포인트 정보

포인트 이용내역에서 확인하면 이렇게 1개의 주문번호에 2개의 포인트 이용내역이있는 걸 볼 수 있다

 

 

 

▶ orderconfirm.jsp

 

 먼저 변수 insertPoint, usePoint 선언해둔다

 

 

▷ 포인트 입력 후 사용 버튼을 눌렀을 때

 

   1. insertPoint 변수에 포인트사용의 value 를 할당하고 insertPoint 변수로 유효성 검사 진행

   

   2. 유효성검사 통과 못하면 입력한 포인트 금액 지우기 (""), 이벤트 멈춤

        - 0원 || 문자열입력 X

        - 보유 포인트보다 많으면 안됨

        - 입력된 포인트가 상품금액보다 크면 안됨

        - 상품금액이 10,000원 미만일 시 포인트 사용 불가

 

  3.  모든 유효성 검사를 통과했을 시 상품금액에서 입력된 포인트금액을 뺀 값이 총결제금액에 set 되어야 함

       - usePoing 에 값 할당 : usePoint = insertPoint

 

 

 

▷ 결제요청 버튼을 눌렀을 때 (포인트 관련된것만 설명하자면)

 

1. 사용 버튼 눌렀는지 체크

   - 포인트 입력칸에 입력만 해놓고 '사용' 버튼을 안눌렀을수도 있으니 usePoint = insertPoint 를 통해 확인

 

 

 

 

js

$(function () {
	//포인트계산
/* 	const today = new Date();
	today.setHours(today.getHours() + 12)
	$('#take-date').val(today); */

	var insertPoint;
	var totalPrice;
	var usePoint=0;
	var buyingPrice = $('#buyingPrice').val();
	
	//포인트 사용 버튼 클릭시
	$('#insertPointBtn').click(function(){
		
		var havePoint = $('#havePoint').text();
		var insertPoint = $('#insertPoint').val();
		console.log("입력포인트 :"+insertPoint); 
		
		//보유포인트에서 입력포인트를 뺐을 때 양수여야함
		var cal = havePoint-insertPoint;
		
		//입력포인트는 구매금액보다 클 수 없음
		var cal2 = buyingPrice - insertPoint;
		//alert("cal2 ="+cal2);
		
		//입력포인트 > 보유포인트
		if(cal<0){
			$('#shortPoint').show();
			alert("보유포인트보다 값이 큽니다");
			
			$('#totalPrice').val(buyingPrice);
			$('#insertPoint').val("");
			event.preventDefault();
			return false;
			
		}else{
			$('#shortPoint').hide();
		}
		
		//입력포인트 != number
		if(isNaN(insertPoint)==true || insertPoint==0){
			alert("포인트가 올바르지 않습니다.");
			$('#totalPrice').val(buyingPrice);
			$('#insertPoint').val("");
			event.preventDefault();
			return false;
		}
		//포인트 사용가능 최소주문금액=10000
		if(buyingPrice < 10000){
			alert("10,000원 이상 구매시 포인트 사용가능합니다");
			
			$('#totalPrice').val(buyingPrice);
			$('#insertPoint').val("");
			event.preventDefault();
			return false;
		}
		//구매금액보다 입력포인트가 클때
		if(cal2<0){
			alert("입력포인트가 구매금액보다 큽니다");
			$('#totalPrice').val(buyingPrice);
			$('#insertPoint').val("");
			event.preventDefault();
			return false;
		}

		//검사가 끝나면 파라미터 usePoint set
		alert("입력포인트 "+insertPoint+"p");
		usePoint = insertPoint;

		totalPrice = buyingPrice-usePoint;
		
		$('#totalPrice').val(totalPrice);
		$('#usePoint').val(usePoint);
	});
	
	
	//submit 시
	 $('#orderBtn').click(function () {
		 
		 	if(!$('#flexCheckDefault').is(':checked')){
    			alert('필수안내사항을 확인해주세요.');
    			event.preventDefault();
    			$('#staticBackdrop').modal("show");
    			event.preventDefault();
    			return false;
    		} 
    		insertPoint = $('#insertPoint').val();
    		console.log("입력포인트="+insertPoint);
    		console.log("클릭포인트="+usePoint);
    		
    		if(insertPoint!=null && usePoint!=insertPoint){
    			alert("포인트사용버튼을 눌러주세요");
    			event.preventDefault();
    			return false;
    		}

    		var havePoint = $('#havePoint').text();
    		
    		//제출할때는 text 에 set 되어있는금액이아니라 고객이 '사용' 버튼을
    		//누른 금액으로 비교
			var cal = havePoint-usePoint
			
			if(cal<0){
				alert("보유하신 포인트보다 많이 입력함");
				event.preventDefault();
    			return false;
			}
			if(isNaN(insertPoint)==true && insertPoint!=null){
				alert("포인트가 올바르지 않습니다.");
				insetPoint = 0;
				event.preventDefault();
				return false;
			}
			
			if(usePoint ==null){
				usePoint = 0;
			}

			var savePoint = $('#savePoint').val();
			
			$('#savePoint').val(savePoint);
			
			console.log("사용포인트 ="+usePoint);
			console.log("적립포인트 ="+savePoint);
			
		    totalPrice = $('#totalPrice').val();
		    var response = confirm('결제금액은 '+totalPrice+"원입니다. 결제를 계속 진행하시겠습니까? ");
	        if(response==false) {
	        	event.preventDefault();
				return false;
	        }

	 });
});

 

 

뷰 (포인트쪽만)

<div class="orderConfirm-finalInfo-div">
        <label for="">포인트사용 : </label> 
        <input type="text" name="insertPoint" id="insertPoint"> 
        <input type="hidden" name="usePoint" id="usePoint"> 
        <button type="button" class="btn btn-secondary" id ="insertPointBtn">사용</button>&nbsp; 
        <!-- <input type="button" value="사용" id="insertPointBtn"> -->
        <span style="font-weight:bold;"> 보유포인트: </span><span id="havePoint">${userVo.point }</span><span style="font-weight:bold;font-size:1.1em"> p</span><br>
        <input type="hidden" name="paramPoint" id="havePoint2"
            value="${userVo.point }"> <span id="shortPoint">보유포인트보다
            값이 큽니다</span>
    </div>
    <div class="orderConfirm-finalInfo-div">
        <label for="total_price">총결제금액 : </label> <input type="text"
            name="totalPrice" id="totalPrice" class="orderConfirm-input"
            value="${paramPrice }" readonly>

    </div>

 

 

막상 쓰고 보니 별거없네요

중간에 input name 변경이 잦았고 외 변경사항이 많아서 어렵게 느껴졌었다는 .. .. 변명은 제가 봐도 우습군요

담에는 계획을 더 촘촘하게 짜서 (추후 변동 사항이 없도록) 스뭇스하게 처리해보겠음