쌍용교육 -JSP수업 98일차 ch15SpringPage(9)

board.css 

에서 글상세 부분에 좋아요 부분 추가

/* 게시판 글상세
---------------------*/
ul.detail-info{
	list-style:none;
	margin:0;
	padding:0;
}
ul.detail-info li{
	margin:0;
	padding-top:5px;
	display:inline-block;
}
ul.detail-info li:last-child{
	vertical-align:top;
}

form#mresp_form , 

추가

form#mre_form, form#mresp_form{
	border:none;
	margin:5px;
}
form#resp_form{
	background-color:#eeeeee;
	border-radius:20px;
	border:none;
	padding:10px 10px 0 10px;
	margin:10px 5px 5px 5px;
	height:130px;
}
form#resp_form textarea{
	width:560px;
}

 

div#re_second, div#mre_second div#mresp_second{
	float:left;
	width:19%;
	margin-bottom:10px;
}
div#resp_first{
	float:left;
	width:70%;
	padding-left:15px;
	margin-bottom:10px;
}
div#resp_second{
	float:left;
	width:26%;
	margin-bottom:10px;
}

댓글이 이전엔 오른쪽에 있었는데 라인과 맞춰졌다.

board.reply.js

좋아요

//좋아요 시작
					if(item.click_num=0 || param.user_num !=item.click_num){
						output += '<img class="output_rfav src="../images/heart01.png" data-num="'+item.re_num+'"><span class="output_rfcount">'+fav_cnt+'</span>';
					}else{
						output += '<img class="output_rfav src="../images/heart02.png" data-num="'+item.re_num+'"><span class="output_rfcount">'+fav_cnt+'</span>';
					}

//댓글 좋아요
					let fav_cnt = 0;
					if(item.refav_cnt!=0) fav_cnt = item.refav_cnt;
					//댓글 좋아요

댓글 아래에 댓글 좋아요가 생긴다, (미완성,사진넣기 전)

사진을 넣은상태

BoardMapper.xml

<!-- 댓글 목록 -->
	<select id="selectListReply" parameterType="map" resultType="boardReplyVO">
		SELECT
			*
		FROM (SELECT
				a.*,
				rownum rnum
			  FROM (SELECT
			  		  *
			  		FROM spboard_reply
			  		JOIN spmember USING(mem_num)
			  		/*로그인한 상태에서 클릭한 사람의 정보읽기, 로그인하지 않으면 0 전달*/
			  		LEFT OUTER JOIN (SELECT re_num,mem_num click_num <!-- 클릭한 사람의 num과 mem_num을 비교 -->
			  			FROM spreply_fav 
			  			WHERE mem_num=#{mem_num}) 
			  			USING(re_num) 
			  		LEFT OUTER JOIN (SELECT re_num,COUNT(*) refav_cnt 
			  						 FROM spreply_fav GROUP BY re_num)
			  						 USING(re_num)
			  		WHERE board_num=#{board_num}
			  		ORDER BY re_num DESC)a)
		<![CDATA[
		WHERE rnum >=#{start} AND rnum <=#{end}
		]]>
	</select>

이부분을 추가

LEFT OUTER JOIN (SELECT re_num,mem_num click_num <!-- 클릭한 사람의 num과 mem_num을 비교 -->
			  			FROM spreply_fav 
			  			WHERE mem_num=#{mem_num}) 
			  			USING(re_num) 
			  		LEFT OUTER JOIN (SELECT re_num,COUNT(*) refav_cnt 
			  						 FROM spreply_fav GROUP BY re_num)
			  						 USING(re_num)

BoardMapper.java

//댓글 좋아요
@Insert("INSERT INTO spreply_fav (re_num,mem_num) VALUES (#{re_num},#{mem_num})")
	public void insertReFav(BoardReFavVO fav);
	@Delete("DELETE FROM spreply_fav WHERE re_num=#{re_num} AND mem_num=#{mem_num}")
	public void deleteReFav(BoardReFavVO fav);
	@Delete("DELETE FROM spreply_fav WHERE re_num = #{re_num}")
	public void deleteReFavByRenum(Long re_num);
	@Delete("DELETE FROM spreply_fav WHERE re_num IN (SELECT re_num FROM spboard_reply WHERE board_num=#{board_num})")
	public void deleteReFavByBoardNum(Long board_num);

BoardServiceImpl

나머지 메소드는 이전에 넣어뒀음

@Override
	public void insertReFav(BoardReFavVO fav) {
		boardMapper.insertReFav(fav);
		
	}

	@Override
	public void deleteReFav(BoardReFavVO fav) {
		boardMapper.deleteReFav(fav);
		
	}

BoardAjaxController

댓글 좋아요 등록 부분 작성

/*===================
	댓글 좋아요 등록/삭제
	===================*/
	@PostMapping("/board/writeReFav")
	@ResponseBody
	public Map<String,Object>writeReFav(
								BoardReFavVO fav,
								HttpSession session){
		log.debug("<<댓글 좋아요 등록/삭제>>:" +fav);
		
		Map<String,Object> mapJson = new HashMap<String, Object>();
		
		MemberVO user = (MemberVO)session.getAttribute("user"); //로그인을 했는지 확인하기위해 (회원제 서비스이기 떄문에)
		if(user == null) {
			mapJson.put("result","logout");
		}else {
			fav.setMem_num(user.getMem_num());
			BoardReFavVO boardReFav = boardService.selecReFav(fav);
			if(boardReFav!=null) {
				boardService.deleteReFav(fav);
				mapJson.put("status","noFav");
			}else {
				boardService.insertReFav(fav);
				mapJson.put("status","yesFav");
			}
			mapJson.put("result","success");
			mapJson.put("count",boardService.selectReFavCount(fav.getRe_num()));
		}
		
		return mapJson;
	}

board.reply.js

/*===================
		댓글수 좋아요 표시
	===================*/
	function displayFav(param,heart){
		let output;
		if(param.status == 'noFav'){
			output = '../images/heart01.png';
		}else{
			output = '../images/heart02.png';
		}
		//문서 객체에 추가
		heart.attr('src',output);
		heart.parent().find('.output_rfcount').text(param.count);
	}

/*===================
		댓글수 좋아요 등록
	===================*/
	$(document).on('click','.output_rfav',function(){
		let heart = $(this);
		//서버와 통신
		$.ajax({
			url:'writeReFav', //컨트롤러에서 매핑해준것
			type:'post',
			data:{re_num:heart.attr('data-num')},
			dataType:'json',
			success:function(param){
				if(param.result == 'logout'){
					alert('로그인 후 좋아요를 눌러주세요');
				}else if(param.result == 'success'){
					displayFav(param,heart);
				}else{
					alert('댓글 좋아요 등록/삭제 오류');
				}
			}
		});
	});

좋아요를 누를시 바로 업데이트가 된다