myHomeSelect.jsp
let data = {
boardMyhomeArticleNo: `${selectMyHome.boardMyhomeArticleNo}`,
memberIdCheck : `${member.memberId}`,
isLogOn : `${isLogOn}`,
member : `${member}`,
}; // 원글 번호랑 로그인 아이디 가져오기(`` 이렇게 안하면 세션에 있는 아이디가 안받아짐 ㅜㅜ)
// 댓글 조회
function replyList(section, pageNum) {
// 댓글 목록 요청
$.ajax({
url: '/gami/board/reply/replyList.do',
type: 'POST',
data: { boardMyhomeArticleNo: `${selectMyHome.boardMyhomeArticleNo}`,
section: section,
pageNum: pageNum},
success: function(replyList) {
var totalReplys = replyList.totalReplys;
var totalPages = replyList.totalPages;
var startPage = replyList.startPage;
var endPage = replyList.endPage;
var section = replyList.section;
var pageNum = replyList.pageNum;
var memberIdCheck = data.memberIdCheck;
var isLogOn = data.isLogOn;
var member = data.member;
// 댓글 사진 URL
var replyImageUrl = '${contextPath}/resources/image/';
var replyImageName = 'mypage.png';
console.log(memberIdCheck);
console.log(isLogOn);
console.log(member);
console.log(totalReplys);
console.log(totalPages);
console.log(startPage);
console.log(endPage);
console.log('section : ' + section);
console.log('pageNum : ' + pageNum);
$('#reply').empty(); // 기존 댓글을 지우기
replyList.replyList.forEach(function(reply) {
var str = '';
// LVL에 따른 padding 설정
var paddingLeft = reply.LVL > 1 ? (reply.LVL - 1) * 15 : '0';
// 댓글 출력
str += '<div style="margin-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding-left: ' + paddingLeft + 'px;">' +
'<div style="display: flex; justify-content: space-between; align-items: flex-start;">' +
'<div style="display: flex; align-items: center;">' +
'<img id="replyImage" src="' + replyImageUrl + replyImageName + '" style="width: 30px; height: auto; max-width: 100%;"/>' +
' ' + // 이미지와 닉네임 사이에 공백 추가
'<span style="font-weight: bold;">' + reply.memberNickname + '</span>' +
'</div>';
// 로그인 id와 글 id 비교
if (memberIdCheck == reply.memberId) {
str += '<div class="buttons">' +
'<button type="button" class="editButton" onclick="updateReplyToggle(this)" value="' + reply.replyNo + '">수정</button>' +
'<button name="deleteRereply" class="deleteRereply" type="button" value="' + reply.replyNo + '" onclick="deleteRereply(' + reply.replyNo + ', this)">삭제</button>' +
'</div>';
}
str += '</div>';
// 댓글 내용
str += '<div class="replyContent" style="margin-top: 10px; font-size: 16px; line-height: 1.5; text-align: left;" data-original-content="' + reply.replyContents + '">' +
reply.replyContents +
'</div>';
// 로그인한 사용자에게만 대댓글 버튼 보이기
if (isLogOn == 'true' && member != null) {
str += '<div class="buttons" style="text-align: left; margin-top: 10px;">' +
'<button class="rereToggle" value="대댓글 작성" onclick="rereToggle(' + reply.replyNo + ', this)">답변</button>' +
'</div>';
}
// 대댓글 작성 폼
if (isLogOn == 'true' && member != null) {
str += '<div class="rereplyForm" style="display: none; margin-top: 10px;">' +
'<textarea class="rereplyContents" placeholder="여기에 작성해 주세요." style="width: 100%;"></textarea>' +
'<button class="addRereply" type="button" onclick="addRereply(' + reply.replyNo + ', this)">등록</button>' +
'</div>';
}
str += '</div>'; // 닫는 댓글 div
// 댓글을 추가
$('#reply').append(str);
});
// 페이징 기능
var pagingStr = '';
pagingStr += '<div class="paging">';
// 글이 있나 없나
if (totalReplys != 0) {
// 맨 처음으로 이동
if (section > 1 && pageNum > 10) {
pagingStr += '<a href="#" onclick="updatePage(' + 1 + ',' + 1 + ')"> ◀◀ </a>';
}
// 뒤로 이동
var pageNumCheck = pageNum;
if (section > 1 && pageNum > 10 && (pageNum % 10) == 0) {
pageNumCheck = Math.floor((pageNum / 10) - 1);
pagingStr += '<a href="#" class="pagingLink" onclick="updatePage(' + (section - 1) + ',' + (pageNumCheck * 10) + ')"> ◀ </a>';
}
// 뒤로 이동 10으로 나누어 지지 않는 경우
if ((section > 1 && pageNum > 10) && (pageNum % 10) != 0) {
pageNumCheck = Math.floor((pageNum / 10));
pagingStr += '<a href="#" class="pagingLink" onclick="updatePage(' + (section - 1) + ',' + (pageNumCheck * 10) + ')"> ◀ </a>';
}
// 현재 페이지를 변수로 저장
var currentPage = pageNum;
// 페이지 출력
var pagingStr = '<div class="pagingContainer">'; // 컨테이너 시작
for (var page = startPage; page <= endPage; page++) {
if (page === currentPage) {
pagingStr += '<span class="pagingLink active" onclick="updatePage(' + section + ',' + page + ')">' + page + '</span>';
} else {
pagingStr += '<span class="pagingLink" onclick="updatePage(' + section + ',' + page + ')">' + page + '</span>';
}
}
pagingStr += '</div>'; // 컨테이너 끝
// 다음 섹션으로 이동
if(page>=10 && page<=endPage){
if ((page % 10) == 0 && (totalPages / 10) != section) {
pagingStr += '<a href="#" class="pagingLink" onclick="updatePage(' + (section + 1) + ',' + (page + 1) + ')"> ▶ </a>';
}
}
// 맨 끝 페이지로 이동
var sectionCheck = section;
if(totalPages>10){
if ((page % 10) == 0 && (totalPages / 10) != section) {
sectionCheck = Math.floor(totalPages / 10);
pagingStr += '<a href="#" class="pagingLink" onclick="updatePage(' + sectionCheck + ',' + totalPages + ')"> ▶▶ </a>';
}
if ((totalPages % 10) != 0) {
sectionCheck = Math.floor((totalPages / 10) + 1);
pagingStr += '<a href="#" class="pagingLink" onclick="updatePage(' + sectionCheck + ',' + totalPages + ')"> ▶▶ </a>';
}
}
pagingStr += '</div>';
$('#reply').append(pagingStr);
}
},
error: function() {
alert('댓글 목록 실패');
}
});
}
// 페이지와 섹션 초기 설정
$(document).ready(function() {
replyList(1, 1);
});
**<body>**
<form id="replyForm">
<h2>댓글 작성</h2>
<textarea id="replyContents" name="replyContents" placeholder="여기에 작성해 주세요." required></textarea>
<button id="addReply" type="submit">작성</button>
</form>
<!-- 댓글 작성 -->
<form id="replyForm">
<textarea id="replyContents" name="replyContents" placeholder="댓글을 작성해주세요." required></textarea>
<button id="addReply" type="submit">댓글 등록</button>
</form>
<div id="replyList">
<ul id="reply"></ul>
</div>
<div class="pagingContainer">
</div>
ReplyController
// 댓글 조회
@RequestMapping(value="/replyList.do", method= {RequestMethod.POST, RequestMethod.GET})
@ResponseBody
public void replylist(@RequestParam("boardMyhomeArticleNo") int boardMyhomeArticleNo,
@RequestParam(value="section", defaultValue = "1") int section, // section, pageNum 값이 없을 경우 1로 초기화 하기.
@RequestParam(value="pageNum", defaultValue = "1") int pageNum,
HttpServletRequest request, HttpServletResponse response) throws Exception {
// Map 생성해서 section, pageNum 넣어주기
Map<String, Integer> paging = new HashMap<>();
paging.put("section", section);
paging.put("pageNum", pageNum);
paging.put("boardMyhomeArticleNo", boardMyhomeArticleNo);
List<ReplyDomain> replyList = replyService.replyList(paging); // 게시글 조회
// 페이징 정보 불러오기
replyDomain = replyService.pagingInfo(pageNum, boardMyhomeArticleNo);
// JSON 객체 생성
JSONObject data = new JSONObject();
int totalReplys = replyDomain.getTotalReplys();
data.put("totalReplys", totalReplys); // 총 글 수
System.out.println("totalReplys" + replyDomain.getTotalReplys());
int totalPages = replyDomain.getTotalPages();
data.put("totalPages", totalPages); // 총 페이지 수
System.out.println("totalPages" + replyDomain.getTotalPages());
int startPage = replyDomain.getStartPage();
data.put("startPage", startPage); // 시작 페이지
System.out.println("startPage" + replyDomain.getStartPage());
int endPage = replyDomain.getEndPage();
data.put("endPage", endPage); // 끝 페이지
System.out.println("endPage" + replyDomain.getEndPage());
data.put("replyList", replyList);
data.put("section", section);
System.out.println("section 받았니?" + section);
data.put("pageNum", pageNum);
System.out.println("pageNum 받았니?" + pageNum);
System.out.println("댓글 리스트" + replyList);
System.out.println("가져오나?" + boardMyhomeArticleNo);
// 응답 설정
response.setContentType("application/json"); // json타입으로
response.setCharacterEncoding("UTF-8"); // utf-8로 안하면 외계어 나옴.
response.getWriter().write(data.toString()); // 스트링 타입으로 변환해서 JSON 데이터 전송
}
ReplyServiceImpl
@Override
public List<ReplyDomain> replyList(int boardMyhomeArticleNo) throws Exception{
return replyDAO.replyList(boardMyhomeArticleNo);
}
ReplyDAOImpl
@Override
public List<ReplyDomain> replyList(boardMyhomeArticleNo) throws DataAccessException{
return sqlSession.selectList("mapper.board.replyList", boardMyhomeArticleNo);
}