Ajax 이용한 댓글 달기

상품 상세페이지를 구현하면서 작성한 댓글 로직.
서비스에 필요한 모든 요소들을 고려하고 시작하는 것이 중요하다.
댓글작성, 더보기, 삭제, 수정 등의 처리에 댓글 부분 전체를 갱신하는 로직.
좋아요 버튼을 처음에 고려하지 않아서 복잡함(테스트 코드의 중요성, 뷰에서도)
(그러지 못해서 대댓글 서비스는 보류함.)

//댓글 작성
$(document).on("click","#review-write",function(e){
	//유효성 체크
 	if($("#login-check").val().length == 0){
		let goLogin = confirm("로그인이 필요한 서비스 입니다");
		if(goLogin){
			location.href="../member/login.do";
			return false;
		}else{
			$("#your-rate").val("");
			$("#your-comment").text("");
			return false;
		}
	}
	if($("#your-rate").val().length == 0){
		alert("별점을 입력해주세요");
		return false;
	}
	if($("#your-comment").val().trim().length == 0){
		alert("내용을 입력해주세요");
		$("#your-comment").val("");
		return false;
	}
  	//스프링 시큐리티 적용했기 때문에 넘겨줘야할 부분
	let token = $("meta[name='_csrf']").attr("content");
	let header = $("meta[name='_csrf_header']").attr("content");
 	//컨트롤러에서 전달된 값을 새로 갱신되는 부분에서 쓰기위해 변수로 지정
	let loginUserRate = $("#your-rate").val();
 	//form에 들어있는 모든 정보(인풋 name속성)들을 JS객체화 {a: "a", b: "b", .....}
	let formData = $("#review").serialize();
	
	$.ajax({
		url:"review.do",
		type:"Post",
		data: formData,
		dataType:"json",
		beforeSend :function(xhr) {
       			xhr.setRequestHeader(header,token);
       		},
		success: function(result){
			//alert("success: "+ result);
			setReviewListHtml(result); //서버에서 비동기로 받은 데이터로 html요소를 다시 구성함. 댓글 리스팅
         
         	        //요소의 속성을 변경. 댓글 입력 부분
			$("#your-rate").val(loginUserRate);
			$("#review-write").attr("type","hidden");
			$("#review-delete").attr("type","button");
			$("#review-update-form").attr("type","button");
			$("#your-comment").attr("readonly","true");
		},
		error: function(a,b,c){
			alert("XMLHttpRequest: "+ a.responseText);
			alert("예외 원인: "+ c);
		}
	});
});

//댓글 더보기 버튼(페이징)
$(document).on("click","button.more_review_button",function(){
	let rcp = Number($("#hidden-rcp").text()) + 1 ;
	let rps = Number($("#hidden-rps").text());
	let itemId = $("#itemId").val();
	//alert(rcp +" "+ rps +" "+ itemId);
	let reviewVo = { rcp : rcp, rps : rps, itemId : itemId};
	//alert(reviewVo.rcp +" "+ reviewVo.rps +" "+ reviewVo.itemId);
	
	$.ajax({
		url : "review.do",
		type : "Get",
		data : { rcp : rcp, rps : rps, itemId : itemId},
		dataType : "json",
		success : function(result){
			//alert("결과값 : "+ result);
			setReviewListHtml(result);
		},
		error : function(a,b,c){
			alert("실패 :" + a.responseText);
		}
	});
});


//댓글 삭제 (처리 후 댓글 전체를 갱신한다)
$(document).on("click","#review-delete",function(){
	let b_itemId = $("#itemId").val();
	let m_email = $("#login-check").val();
	$.ajax({
		url : "re-delete.do",
		type : "Get",
		data : {b_itemId : b_itemId, m_email : m_email},
		dataType : "json",
		success : function(result){
			document.getElementById("your-rate").value = 0;
			//$("#your-rate").val(0);
			$("#review-write").attr("type","button");
			$("#review-delete").attr("type","hidden");
			$("#review-update-form").attr("type","hidden");
			$("#your-comment").removeAttr("readonly");
			document.getElementById("your-comment").value = "";
			//$("#your-comment").val("");
			setReviewListHtml(result);
		},
		error : function(a,b,c){
			alert("실패 :" + a.responseText);
		}	
	});
});


$(function(){	
	//댓글 수정 버튼 수정 폼 보이기
	$("#review-update-form").on("click", function(){
		$("#your-comment").removeAttr("readonly");
		$(this).attr("id","review-update-submit");
		$(this).attr("value","수정하기");
	});
});