프로젝트/G.O.A.T(여행 스케줄러)

여행게시판 좋아요(추천수) 추가

찌서니 2022. 1. 18. 09:37
🔔 22월 01월 17일
✔ 여행이야기 좋아요(추천)
✔ 여행이야기 3개띄우는 공간 생성
✔ 공지사항 댓글 이슈(댓글 삭제를 하면 re사진이 삭제된 댓글에 붙음.. 그리고 공간이 안 맞음)
      ->지찬오빠 해결
✔ 여행이야기 검색 만들기 (제목, 내용, 제목+내용)

이거를 3개 띄우는 공간 생성했다고 말하기는 좀 웃기지만,,,ㅎㅎ

공간생성은 쉬운데,, 문제가 SQL문 돌리는게 제일 난관일거 같다.

아닌가? 내가 너무 어렵게 생각하고 있는거 같기도 한데ㅜ

내 머릿속으로는 테이블 3개 조인해야될거 같아서 우선 하나씩 해보자!!!

 

 

저번에 공지사항 이슈는 오빠가 해결해줬는데,,, 문제가 삭제되면 따라서 올라간다.

또 다른 문제가,,^^ 나 정말 오류 잘 찾는듯 내가 돌리면 뭐가 다 깨져,,, 좋은거지?

 

 

좋아요!! 추가했습니다!!!!

위에는 누르기 전이고 누르면 하트가 밑에 사진처럼 빨간색으로 바뀐다.

그리고 숫자가 카운트돼서 실시간으로 반영!

처음에는 누를때 SQL문은 돌아가는데 새로고침을 해야 반영돼서

window.onload(); 함수를 썼는데 문제가 새로고침이 되는거여서

조회수 카운트가 자꾸 됨ㅠㅠ

근데 이거 해결은 또 다른 팀원이 해줬다.

나는 그 사이에 검색기능 추가함

 

$.post("tripLike.do", "t_num="+t_num, function(data) {
			var likeYesOrNo = '${tripLikeImgSrc}'; //현재 사용자가 공감이 되어있는지 아닌지 확인
            if(likeYesOrNo.indexOf('full') == -1){
               var cnt = 0; // 공감 안했던거면 0으로 보내고
            }else{
               var cnt = 1; // 공감을 했으면 1로 보내고
            }
            var tripLikeImgSrc = data;
            if(tripLikeImgSrc.indexOf('full') == -1 && cnt == 0){ // full이라는 글씨가 있으면, full이라는 글자의 인덱스를 반환하기 때문에
                                           // 0포함  0보다 큰 수가 나옴
               $('#likeSpan').empty();
               $('#likeSpan').append(" : " + ${tripLikeCnt});
               var del = '${tripLikeCnt}';
            }else if(tripLikeImgSrc.indexOf('full') > -1 && cnt == 0){
               $('#likeSpan').empty();
               $('#likeSpan').append(" : " + ${tripLikeCnt + 1});
            }else if(tripLikeImgSrc.indexOf('full') == -1 && cnt == 1){              
               $('#likeSpan').empty();
               $('#likeSpan').append(" : " + ${tripLikeCnt -1});
               var del = '${tripLikeCnt - 1}';
            }else if(tripLikeImgSrc.indexOf('full') > -1 && cnt == 1){
               $('#likeSpan').empty();
               $('#likeSpan').append(" : " + ${tripLikeCnt});
            }
            if(del == 0){
               $('#likeSpan').empty();
            }
            $(".tlChk").attr("src", tripLikeImgSrc);
		});
	};
<div style="text-align: center; margin: 20px;">
		<img style="border-radius:10px; width: 40px;" class="tlChk" 
			onclick="tripLike(${trip.t_num})" src="${tripLikeImgSrc}">
		<c:if test="${tripLikeCnt == 0}">
			<span style="font-size: 20px;">공감</span><span id="likeSpan"></span>
		</c:if>
		<c:if test="${tripLikeCnt != 0}">
			<span style="font-size: 20px;">공감</span><span id="likeSpan">:${tripLikeCnt}</span>
		</c:if>
</div>
@RequestMapping("trip/tripView")
	public String noticeView(Trip trip, HttpSession session, String pageNum, Model model) {
		int t_num = trip.getT_num();
		String m_id = (String) session.getAttribute("id");
		String tripLikeImgSrc ="";
		int tripLikeCnt;
		
		ts.updateViewcount(t_num);  // 조회수 증가
		Trip trip2 = ts.select(t_num); // 조회
		
		if(m_id != null) {
			TripLike tripLike = ts.tLike(m_id, t_num);
			if(tripLike != null) {
				tripLikeImgSrc = "/goat/resources/tripPhoto/fullHeart.png";
				tripLikeCnt = ts.tlCnt(t_num);
			}else {
				tripLikeImgSrc = "/goat/resources/tripPhoto/heart.png";
				tripLikeCnt = ts.tlCnt(t_num);
			}
		}else {
			tripLikeImgSrc = "/goat/resources/tripPhoto/heart.png";
			tripLikeCnt = ts.tlCnt(t_num);
		}
		
		model.addAttribute("tripLikeImgSrc",tripLikeImgSrc);
		model.addAttribute("tripLikeCnt", tripLikeCnt);
		model.addAttribute("pageNum", pageNum);		
		model.addAttribute("trip", trip2);
		
		return "trip/tripView";
	}
	
	@RequestMapping(value = "trip/tripLike", produces = "text/html;charset=utf-8")
	@ResponseBody // jsp로 가지말고 바로 본문으로 전달
	public String tripLike(String t_num, HttpSession session) {
		
		String m_id = (String) session.getAttribute("id");
		int num = Integer.parseInt(t_num);
		String tripLikeImgSrc = "";
		
		TripLike tripLike = ts.tLike(m_id, num);
		
		if(tripLike != null) { // 좋아요 테이블에 있으면
			ts.deleteTL(m_id, num); // 좋아요 삭제
			tripLikeImgSrc = "/goat/resources/tripPhoto/heart.png";
		}else {
			ts.insertTL(m_id, num); // 좋아요 추가
			tripLikeImgSrc = "/goat/resources/tripPhoto/fullHeart.png";
		}	
		return tripLikeImgSrc;
	}

이렇게 쓰면 좋아요를 눌러도 새로고침없이 숫자가 카운트되는걸

구현할 수 있음!

 

 

 

검색기능은 구현중인데 우선 검색기능은 구현이됐고,

어떤 분류에서 무슨 단어로 검색을 했는지 부분에서 오류가 있어서

그 부분 수정하면 해결된다.

 

아무것도 안쓰고 검색하면 전체 리스트를 보여준다.