쌍용교육 -JSP수업 101일차 ch15SpringPage(12)

BoardMapper.java

@Select("SELECT * FROM spboard_response WHERE te_num=#{te_num}")
	public BoardResponseVO selectResponse(Long te_num);
	public void insertResponse(BoardResponseVO boardResponse);
	@Update("UPDATE spboard_response SET te_content=#{te_content},te_ip=#{te_ip},te_mdate=SYSDATE WHERE te_num=#{te_num}")
	public void updateResponse(BoardResponseVO boardResponse);
	public void deleteResponse(Long te_num);
	//댓글 삭제시 자식글인 답글을 모두 삭제
	@Delete("DELETE FROM spboard_response WHERE re_num=#{re_num}")
	public void deleteResponseByReNum(Long re_num);
	//부모글 삭제시 댓글의 답글이 존재하면 댓글 번호를 구해서 답글 삭제
	@Delete("DELETE FROM spboard_response WHERE re_num IN (SELECT re_num FROM spboard_reply WHERE board_num=#{board_num})")
	public void deleteResponseByBoardNum(Long board_num);
	//답글의 개수 구하기
	@Select("SELECT COUNT(*) FROM spboard_response WHERE re_num=#{re_num}")
	public Integer selectResponseCount(Long re_num);

//답글의 개수 구하기는 새로추가한 것으로 service부분들도 다 추가해준다.

BoardAjaxController

/*===================
	 답글 수정
	===================*/
	@PostMapping("/board/updateResponse")
	@ResponseBody
	public Map<String,String> modifyResponse(BoardResponseVO boardResponseVO,
											 HttpSession session,
											 HttpServletRequest request){
		
		log.debug("<<답글 수정>>:"+boardResponseVO);
		
		Map<String,String> mapJson = new HashMap<String, String>();
		
		MemberVO user = (MemberVO)session.getAttribute("user");
		BoardResponseVO db_response = boardService.selectResponse(boardResponseVO.getTe_num());
		
		if(user==null) {
			//로그인이 되지 않은 경우
			mapJson.put("result","logout");
			
		}else if(user!=null && user.getMem_num()==db_response.getMem_num()) {
			//로그인 회원번호와 작성자 회원번호 일치
			//ip 저장
			boardResponseVO.setTe_ip(request.getRemoteAddr());
			//답글 수정
			boardService.updateResponse(boardResponseVO);
			mapJson.put("result","success");
		}else {
			//로그인 회원번호와 작성자 회원번호 불일치
			mapJson.put("result","wrongAccess");
		}
		
		
		return mapJson;
	}

board.reply.js

답글 수정부분 작성(답글 등록 부분 코드를 재활해서 작성함)

/* ========================================================================
	 * 답글 수정
	 * ======================================================================== */	
	//답글 수정 버튼 클릭시 수정폼 노출
	$(document).on('click','.resp-modify-btn',function(){

		//답글 글번호
		let te_num = $(this).attr('data-num');
		//답글 내용
		let content = $(this).parent().find('p').html().replace(/<br>/gi,'\r\n');
	
		//답글 수정 폼 UI
		let responseUI = '<form id="mresp_form">'
			responseUI += '   <input type="hidden" name="te_num" id="mresp_num" value="'+te_num+'">';
			responseUI += '   <textarea rows="3" cols="50" name="te_content" id="mresp_content" class="rep-content">'+content+'</textarea>';			
			responseUI += '   <div id="mresp_first"><span class="letter-count">300/300</span></div>';      
			responseUI += '   <div id="mresp_second" class="align-right">';
			responseUI += '      <input type="submit" value="수정">';
			responseUI += '      <input type="button" value="취소" class="mresp-reset">';
			responseUI += '   </div>';
			responseUI += '</form>';
		
		//이전에 이미 수정하는 답글이 있을 경우 수정버튼을 클릭하면
		//숨김 resp-sub-item를 환원시키고 수정폼을 초기화함
		initResponseModifyForm();
		//지금 클릭해서 수정하고자 하는 데이터는 감추기
		$(this).parent().hide();
		
		//수정폼을 수정하고자하는 데이터가 있는 div에노출
		$(this).parents('.respitem').append(responseUI);
		
		//입력한 글자수 셋팅
		let inputLength = $('#mresp_content').val().length;
		let remain = 300 - inputLength;
		remain += '/300';
		
		//문서 객체에 반영
		$('#mresp_first .letter-count').text(remain);
	});
	//답글 수정 폼 초기화
	function initResponseModifyForm(){
		$('.resp-sub-item').show();
		$('#mresp_form').remove();
	}
	//답글 수정 취소 버튼 클릭시 답글 폼 초기화
	$(document).on('click','.mresp-reset',function(){
		initResponseModifyForm();
	});

수정폼 생성이 됐음. 취소는 가능 수정은 아직 구현 X

 

//답글 수정
	$(document).on('submit','#mresp_form',function(event){
		if($('#mresp_content').val().trim()==''){
			alert('내용을 입력하세요');
			$('#mresp_content').val('').focus();
			return false;
		}
		//폼에 입력한 데이터 반환
		let form_data = $(this).serialize();
		
		//서버와 통신
		$.ajax({
			url:'updateResponse',
			type:'post',
			data:form_data,
			dataType:'json',
			success:function(param){
				if(param.result=='logout'){
					alert('로그인해야 수정할 수 있습니다.');
				}else if(param.result=='success'){
					$('#mresp_form').parent().find('p')
									.html($('#mresp_content').val()
									.replace(/</g,'&lt;')
									.replace(/>/g,'&gt;')
									.replace(/\r\n/g,'<br>')
									.replace(/\r/g,'<br>')
									.replace(/\n/g,'<br>')
									);
					//최근 수정일 처리
					$('#mresp_form').parent()
								   .find('.modify-date')
								   .text('최근 수정일 : 5초미만');
					//수정 폼 초기화
					initResponseModifyForm();
				}else if(param.result=='wrongAccess'){
					alert('타인의 글은 수정할 수 없습니다.');
				}else{
					alert('답글 수정 오류 발생');
				}
			},
			error:function(){
				alert('네트워크 오류 발생');
			}
		});
		
		//기본 이벤트 제거
		event.preventDefault();
	});

수정이 된다. 하지만 등록일에서 수정일로 변경이 되지않는다.

//최근 수정일 처리
$('#mresp_form').parent()
   .find('.modify-date')
   .text('최근 수정일 : 5초미만');

mresp 오타가 있어서 수정해서 다시 명시해주었다.

boardMapper.xml

추가로 답글목록 부분에 mdate를 빼서 넣어준다. 이제 수정하면 수정일이 변경된다.

답글삭제도 추가

<!-- 답글 삭제 -->
	<delete id="deleteResponse" parameterType="long">
		DELETE FROM spboard_response WHERE te_num IN(
			SELECT te_num
			FROM spboard_response
			START WITH te_num=#{te_num}
			CONNECT BY PRIOR te_num = te_parent_num
		)
	</delete>

BoardAjaxController

/*===================
	 답글 삭제
	===================*/
	@PostMapping("/board/deleteResponse")
	@ResponseBody
	public Map<String,Object> deleteResponse(
									long te_num,
									int mem_num,
									HttpSession session){
		log.debug("<<답글삭제 -te_num>> : " +te_num);
		log.debug("<<답글삭제 -mem_num>> : " +mem_num);
		
		Map<String,Object> mapJson = new HashMap<String, Object>();
		MemberVO user = (MemberVO)session.getAttribute("user");
		if(user==null) {
			//로그인이 되지 않은 경우
			mapJson.put("result","logout");
			
		}else if(user !=null && user.getMem_num()==mem_num) {
			//로그인 회원번호와 작성자 회원번호 일치
			//re_num 구하기
			BoardResponseVO response = boardService.selectResponse(te_num);
			//답글 삭제
			boardService.deleteResponse(te_num);
			int cnt = boardService.selectResponseCount(response.getRe_num());
			
			log.debug("<<답글 삭제 후 나머지 답글 개수>> : "+cnt);
			
			mapJson.put("cnt",cnt);
			mapJson.put("result","success");
		}else {
			//로그인 회원번호와 작성자 회원번호 불일치
			mapJson.put("result","wrongAccess");
		}
		
		return mapJson;
	}

BoardReply.js

/* ========================================================================
	 * 답글 삭제
	 * ======================================================================== */		
	$(document).on('click','.resp-delete-btn',function(){
		let resdelete_btn = $(this);
		//댓글 번호
		let re_num = $(this).attr('data-rnum');
		//답글 번호
		let te_num = $(this).attr('data-num');
		//작성자 회원번호
		let mem_num = $(this).attr('data-mem');
		
		//서버와 통신
		$.ajax({
			url:'deleteResponse',
			type:'post',
			data:{te_num:te_num,mem_num:mem_num},
			success:function(param){
				if(param.result=='logout'){
					alert('로그인해야 삭제할 수 있습니다.');
				}else if(param.result=='success'){
					alert('삭제 완료!');
					//답글 갯수
					resdelete_btn.parents('.sub-item')
							  	 .find('div .rescontent-btn')
							  	 .val('▼ 답글'+param.cnt);
					if(param.cnt>0){
						getListResponse(re_num,resdelete_btn.parents('.sub-item'));
					}else{
						resdelete_btn.parents('.sub-item')
									 .find('div .rescontent-btn').hide();
						$('.respitem').remove();
					}
				}else if(param.result=='wrongAccess'){
					alert('타인의 글을 삭제할 수 없습니다.');
				}else{
					alert('답글 삭제 오류 발생');
				}
			},
			error:function(){
				alert('네트워크 오류 발생');
			}
		});
	});

상위 답글을 지우면 하위 답글까지 지워진다.