NFT커뮤 프로젝트에서 했던 포인트 충전을 이번 프로젝트에도 적용 시켜 보고 싶었다.
뷰에서 할 일
- form에 name을 줘서 radio 속성을 사용하여 포인트 선택한다.
- input 버튼을 누르면 자바스크립트의 함수를 호출하여 카카오 페이 API를 이용하여 결제를 한다.
- 결제가 완료되면 formName.submit();을 보낸다.
※ 라디오를 사용하여 선택된 값을 자바스크립트로 보낼 때
const pointAmount = document.querySelector("input[name='pointPoint']:checked").value;pointCharge.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en" itemscope itemtype="http://schema.org/WebPage">
<html lang="en">
<head>
<meta charset="UTF-8">
<title>포인트 충전</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script>
<script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.1.5.js"></script>
</head>
<body>
<div class="container" style="margin-top: 100px;">
<h2>포인트 충전</h2>
<div class="btn-group" >
<form action="/member/pointCharge" method="post" name="updatePoint" th:object="${member}">
<input type="hidden" name="memberId" id="memberId"th:value="${member.memberId}" >
<input type="hidden" name="pointType" id="pointType"value="포인트 충전" >
<div class="form-check">
<input class="form-check-input" type="radio" id="50000" name="pointPoint" th:value="50000" checked>
<label class="form-check-label" for="50000">
50000p
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="pointPoint" id="100000" th:value="100000">
<label class="form-check-label" for="100000">
100000p
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" id="200000" name="pointPoint" th:value="200000" checked>
<label class="form-check-label" for="200000">
200000p
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="pointPoint" id="500000" th:value="500000">
<label class="form-check-label" for="500000">
500000p
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="pointPoint" id="1000000" th:value="1000000">
<label class="form-check-label" for="1000000">
1000000p
</label>
</div>
<input class="btn btn-outline-danger" type="button" onclick="requestPay()" value="포인트 충전">
</form>
</div>
</div>
</body>
<script>
//포인트 값과 구매자의 이름, 이메일
const pointAmount = document.querySelector("input[name='pointPoint']:checked").value;
const pointBuyerEmail = "[[${member.memberEmail}]]"
const pointBuyerName = "[[${member.memberName}]]"
const IMP = window.IMP;
IMP.init('imp45182196');
function requestPay() {
// IMP.request_pay(param, callback) 결제창 호출
IMP.request_pay({ // param
pg: "kakao",
pay_method: "card",
merchant_uid: 'merchant_' + new Date().getTime(),
name: "포인트 충전",
amount: pointAmount,
buyer_email: pointBuyerEmail,
buyer_name: pointBuyerName,
}, function (rsp) { // callback
if (rsp.success) {
const msg = '결제가 완료되었습니다.';
alert(msg);
updatePoint.submit();
} else {
const msg = '결제에 실패하였습니다.';
alert(msg);
}
});
}
</script>
</html>MemberController
@GetMapping("/pointCharge/{memberId}")
public String pointCharge(@PathVariable("memberId") Long memberId,Model model) {
MemberDetailDTO memberDetailDTO = ms.findById(memberId);
model.addAttribute("member", memberDetailDTO);
return "/member/pointCharge";
}
@PostMapping("pointCharge")
public String pointCharge(@ModelAttribute PointSaveDTO pointSaveDTO) {
ms.pointCharge(pointSaveDTO);
return "redirect:/member/pointView?m_id="+ pointSaveDTO.getMemberId();
}MemberServeceImpl
포인트 이력을 저장(save)하고, 멤버의 포인트를 충전(update)한다.
여기서! 멤버의 포인트를 업데이트 할 때, Entity 를 사용해서 회원 정보를 업데이트 할 경우..
MemberUpdateDTO 의 모든 정보를 가져와서 같은 정보를 새로 저장 시키고, 포인트만 변경한다?
이것은 코드가 엄청나게 늘어나고, 비효율적일 거라는 느낌이 들었다. 그리고 다른 테이블에서도 이런 작업이 빈번할텐데 뭔가 작업이 필요하지 않을까?
그래서 mybatis를 가져와서 사용하기로 마음먹었다.
private final MemberRepository mr;
private final MemberMapperRepository mmr;
private final PointRepository pr;
@Override
public void pointCharge(PointSaveDTO pointSaveDTO) {
//포인트 이력 정보 저장
MemberEntity memberEntity = mr.findById(pointSaveDTO.getMemberId()).get();
PointEntity pointEntity = PointEntity.toPointSaveEntity(pointSaveDTO,memberEntity);
pr.save(pointEntity);
//회원 포인트 업데이트
Map<String, Object> memberPointUpdate = new HashMap<>();
memberPointUpdate.put("member_id", pointSaveDTO.getMemberId());
memberPointUpdate.put("member_point", pointSaveDTO.getPointPoint());
mmr.pointCharge(memberPointUpdate);
}길고 긴 복습의 시간을 거쳐 mybatis를 가져왔다.
그것은 다음 시간에 계속
- 지난 nft와는 다르게 자바스크립트로 html의 값을 가져오는 것이 능숙해졌다. 코드의 양을 줄일 수 있었다!
1일 1커밋 1일 1벨로그!