board/read.html
페이지 정보
본문
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{include/layout.html}">
<body>
<div layout:fragment="content">
<br>
<center>
<h1>READ</h1>
<table width="700" border="1">
<tr>
<th width="50">제목</th>
<td th:text="${dto.title}"></td>
</tr>
<tr>
<th>내용</th>
<td th:utext="${#strings.replace(dto.content, changeLine, '<br/>')}"></td>
</tr>
<tr>
<th>작성자</th>
<td>[[${dto.writer}]]</td>
</tr>
</table>
<!-- 첨부 이미지 출력 -->
<div style="width:700px;" th:if="${dto.fileNames != null && dto.fileNames.size() > 0}">
<img th:each="fileName : ${dto.fileNames}" th:src="|/view/${fileName}|">
</div>
<table width="700" border="0">
<tr>
<td><a th:href="|@{list}?${pageRequestDTO.link}|">[목록]</a></td>
<td align="right">
<a th:href="|@{modify(bno=${dto.bno})}&${pageRequestDTO.link}|">[수정]</a>
<a th:href="@{remove(bno=${dto.bno})}">[삭제]</span>
</td>
</tr>
</table>
<!-- 댓글 작성-->
<br>
<table width="700" border="0">
<tr>
<td style="color:#aaa">댓글 목록</td>
<td align="right">
<button class="addReplyBtn">댓글 작성</button>
</td>
</tr>
</table>
<!-- 댓글 목록 -->
<style>
.replyList{
border-top:1px solid #bbb;
border-bottom:1px solid #bbb;
}
.pageTd {
border:1px solid #bbb;
min-width: 20px;
text-align:center;
padding:2px 0px;
}
</style>
<table width="700" border="0" class="replyList"></table>
<!-- 댓글 페이징 -->
<table width="700" border="0" class="replyPaging"></table>
</center>
<!-- 댓글 등록 -->
<style>
.registerModal {
width: 300px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
padding: 10px;
z-index: 1000;
}
.td_white{ color:white; }
</style>
<table border=0 class="registerModal" style="display:none;">
<tr>
<td></td>
<td class="td_white"><b>[ 댓글 등록 ]</b></td>
</tr>
<tr>
<td class="td_white">글쓴이</td>
<td><input class="replyer"></td>
</tr>
<tr>
<td class="td_white">댓글 내용</td>
<td><input class="replyText"></td>
</tr>
<tr>
<td></td>
<td>
<button class="registerBtn">댓글 작성</button>
<button class="closeRegisterBtn">창 닫기</button>
</td>
</tr>
</table>
<!-- 댓글 조회,수정,삭제 -->
<style>
.modifyModal {
width: 300px;
height: 100px;
background-color: gray;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -150px;
padding: 10px;
z-index: 1000;
}
.td_white{ color:white; }
</style>
<table border=0 class="modifyModal" style="display:none;">
<tr>
<td></td>
<td class="td_white"><b>[ 댓글 정보 ]</b></td>
</tr>
<tr>
<td class="td_white">글쓴이</td>
<td class="replyHeader">bno</td>
</tr>
<tr>
<td class="td_white">댓글 내용</td>
<td><input class="modifyText"></td>
</tr>
<tr>
<td></td>
<td>
<button class="modifyBtn">수정</button>
<button class="removeBtn">삭제</button>
<button class="closeModifyBtn">창 닫기</button>
</td>
</tr>
</table>
<br>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script src="/js/reply.js"></script>
</div>
<th:block layout:fragment="script">
<script th:inline="javascript">
const bno = [[${dto.bno}]]
const replyList = document.querySelector('.replyList') //댓글 목록 DOM
const replyPaging = document.querySelector('.replyPaging') //페이지 목록 DOM
function printList(dtoList){ //댓글 목록 출력
let str = '';
if(dtoList && dtoList.length > 0){
for (const dto of dtoList) {
str += `<tr>
<td width="35">${dto.rno}</td>
<td data-rno="${dto.rno}" style="cursor:pointer">${dto.replyText}</td>
<td width="70">${dto.replyer}</td>
<td width="190">${dto.regDate}</td>
</tr>`
}
}
//console.log(str);
replyList.innerHTML = str
}
function printPages(data){ //페이지 목록 출력
//pagination
let pageStr = '';
if(data.prev) {
pageStr +=`<td><a data-page="${data.start-1}">PREV</a></td>`
}
for(let i = data.start; i <= data.end; i++){
pageStr +=`<td class="pageTd">
<a data-page="${i}">${i}</a></td>`
}
if(data.next) {
pageStr +=`<td><a data-page="${data.end +1}">NEXT</a></td>`
}
pageStr +=`<td width=100%></td>`
//console.log(pageStr);
replyPaging.innerHTML = pageStr
}
function printReplies(page,size,goLast){
getList({bno, page,size, goLast}).then(
data => {
printList(data.dtoList) //목록 처리
printPages(data) //페이징 처리
}
).catch(e => {
console.error(e)
})
}
printReplies(1,5,false) //1페이지, 페이지당 5개 출력
//댓글 페이지 클릭
let page = 1
let size = 5
replyPaging.addEventListener("click", function (e){
e.preventDefault()
e.stopPropagation()
const target = e.target
if(!target || target.tagName != 'A'){
return
}
const pageNum = target.getAttribute("data-page")
page = pageNum
printReplies(page, size)
},false)
//댓글 등록 모달
const replyText = document.querySelector(".replyText")
const replyer = document.querySelector(".replyer")
document.querySelector(".addReplyBtn").addEventListener("click", function (e){
$(".registerModal").show();
},false)
document.querySelector(".closeRegisterBtn").addEventListener("click", function (e){
$(".registerModal").hide();
},false)
//댓글 등록
document.querySelector(".registerBtn").addEventListener("click", function(e){
const replyObj = {
bno:bno,
replyText:replyText.value,
replyer:replyer.value}
addReply(replyObj).then(result => {
//alert(result.rno)
alert("댓글 등록 완료");
$(".registerModal").hide()
replyText.value = ''
replyer.value =''
printReplies(1,5,false) //댓글 목록 갱신
}).catch(e => {
alert("작성란을 비워두지 마세요 ^^")
})
}, false)
//댓글 조회,수정,삭제 모달
const replyHeader = document.querySelector(".replyHeader")
const modifyText = document.querySelector(".modifyText")
const modifyBtn = document.querySelector(".modifyBtn")
const removeBtn = document.querySelector(".removeBtn")
document.querySelector(".closeModifyBtn").addEventListener("click", function (e){
$(".modifyModal").hide();
},false)
replyList.addEventListener("click", function (e){
e.preventDefault()
e.stopPropagation()
const target = e.target
if(!target){
return
}
const rno = target.getAttribute("data-rno")
if(!rno){
return
}
getReply(rno).then(reply => { //댓글의 내용을 모달창에 채워서 보여주는
console.log(reply)
replyHeader.innerHTML = reply.rno
modifyText.value = reply.replyText
//modifyModal.show()
$(".modifyModal").show("slow");
}).catch(e => alert('error'))
},false)
//수정
modifyBtn.addEventListener("click", function(e) {
const replyObj = {
bno:bno,
rno:replyHeader.innerHTML,
replyText:modifyText.value
}
modifyReply(replyObj).then(result => {
alert(result.rno+' 댓글이 수정되었습니다.')
replyText.value = ''
//modifyModal.hide()
$(".modifyModal").hide();
printReplies(page, size)
}).catch(e => {
console.log(e)
})
},false)
//삭제
removeBtn.addEventListener("click", function(e) {
removeReply(replyHeader.innerHTML).then(result => {
alert(result.rno +' 댓글이 삭제되었습니다.')
replyText.value = ''
//modifyModal.hide()
$(".modifyModal").hide();
printReplies(1, size)
}).catch(e => {
console.log(e)
})
},false)
</script>
</th:block>
</body>
</html>
- 이전글board/list.html 24.07.04
- 다음글board/modify.html 24.07.04
댓글목록
등록된 댓글이 없습니다.