view 처리 하기
<%@ page contentType="text/html; charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="ko">
<head>
<%@ include file="../include/static-head.jsp" %>
<style>
.content-container {
width: 60%;
margin: 150px auto;
position: relative;
}
.content-container .main-title {
font-size: 24px;
font-weight: 700;
text-align: center;
border-bottom: 2px solid rgb(75, 73, 73);
padding: 0 20px 15px;
width: fit-content;
margin: 20px auto 30px;
}
.content-container .main-content {
border: 2px solid #ccc;
border-radius: 20px;
padding: 10px 25px;
font-size: 1.1em;
text-align: justify;
min-height: 400px;
}
.content-container .custom-btn-group {
position: absolute;
bottom: -10%;
left: 50%;
transform: translateX(-50%);
}
</style>
</head>
<body>
<div class="wrap">
<%@ include file="../include/header.jsp" %>
<div class="content-container">
<h1 class="main-title">${b.boardNo}번 게시물</h1>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">작성자</label>
<input type="text" class="form-control" id="exampleFormControlInput1" placeholder="이름" name="writer"
value="${b.writer}" disabled>
</div>
<div class="mb-3">
<label for="exampleFormControlInput2" class="form-label">글제목</label>
<input type="text" class="form-control" id="exampleFormControlInput2" placeholder="제목" name="title"
value="${b.title}" disabled>
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">내용</label>
<p class="main-content">
${b.content}
</p>
</div>
<div class="btn-group btn-group-lg custom-btn-group" role="group" >
<button id="mod-btn" type="button" class="btn btn-warning">수정</button>
<button id="del-btn" type="button" class="btn btn-danger">삭제</button>
<button id="list-btn" type="button" class="btn btn-dark">목록</button>
</div>
<!-- 댓글 영역 -->
<div id="replies" class="row">
<div class="offset-md-1 col-md-10">
<!-- 댓글 쓰기 영역 -->
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9">
<div class="form-group">
<label for="newReplyText" hidden>댓글 내용</label>
<textarea rows="3" id="newReplyText" name="replyText" class="form-control"
placeholder="댓글을 입력해주세요."></textarea>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="newReplyWriter" hidden>댓글 작성자</label>
<input id="newReplyWriter" name="replyWriter" type="text" class="form-control"
placeholder="작성자 이름" style="margin-bottom: 6px;">
<button id="replyAddBtn" type="button"
class="btn btn-dark form-control">등록</button>
</div>
</div>
</div>
</div>
</div> <!-- end reply write -->
<!--댓글 내용 영역-->
<div class="card">
<!-- 댓글 내용 헤더 -->
<div class="card-header text-white m-0" style="background: #343A40;">
<div class="float-left">댓글 (<span id="replyCnt">0</span>)</div>
</div>
<!-- 댓글 내용 바디 -->
<div id="replyCollapse" class="card">
<div id="replyData">
<!--
< JS로 댓글 정보 DIV삽입 >
-->
</div>
<!-- 댓글 페이징 영역 -->
<ul class="pagination justify-content-center">
<!--
< JS로 댓글 페이징 DIV삽입 >
-->
</ul>
</div>
</div> <!-- end reply content -->
</div>
</div> <!-- end replies row -->
<!-- 댓글 수정 모달 -->
<div class="modal fade bd-example-modal-lg" id="replyModifyModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" style="background: #343A40; color: white;">
<h4 class="modal-title">댓글 수정하기</h4>
<button type="button" class="close text-white" data-bs-dismiss="modal">X</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<div class="form-group">
<input id="modReplyId" type="hidden">
<label for="modReplyText" hidden>댓글내용</label>
<textarea id="modReplyText" class="form-control" placeholder="수정할 댓글 내용을 입력하세요."
rows="3"></textarea>
</div>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="replyModBtn" type="button" class="btn btn-dark">수정</button>
<button id="modal-close" type="button" class="btn btn-danger"
data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- end replyModifyModal -->
</div>
<%@ include file="../include/footer.jsp" %>
</div>
<script>
const [$modBtn, $delBtn, $listBtn]
= [...document.querySelector('div[role=group]').children];
// const $modBtn = document.getElementById('mod-btn');
//수정버튼
$modBtn.onclick = e => {
location.href = '/board/modify?boardNo=${b.boardNo}';
};
//삭제버튼
$delBtn.onclick = e => {
if(!confirm('정말 삭제하시겠습니까?')) {
return;
}
location.href = '/board/delete?boardNo=${b.boardNo}';
};
//목록버튼
$listBtn.onclick = e => {
location.href = '/board/list?pageNum=${p.pageNum}&amount=${p.amount}';
};
</script>
</body>
</html>
댓글 목록 출력 완료!
//== 시간 출력 포맷팅
// 완료
===// 현재 한 게시물에서 출력되는 댓글은 10개로 제한되어있다.
// 먼저 총 댓글수 출력 하기
총 댓글수 나오게 하기 완료
//= 댓글 페이징 처리
$가 아니고 &로 해야함.
완료!
== 댓글 페이지 처리 후 버그 발생
== 조치 완료
등록 POST = my version.
선생님 버전 = 즉시 실행함수에 넣을것.
<!-- // 댓글 등록 이벤트 처리 핸들러 등록 함수
function makeReplyRegisterClickEvent(e) {
document.getElementById('replyAddBtn').onclick = makeReplyRegisterClickHandler;
}
// 댓글 등록 이벤트 처리 핸들러 함수
function makeReplyRegisterClickHandler(e) {
const $writerInput = document.getElementById('newReplyWriter');
const $contentInput = document.getElementById('newReplyText');
//서버로 전송할 데이터들
const replyData = {
replyWriter: $writerInput.value,
replyText: $contentInput.value,
boardNo: bno
};
// POST 요청을 위한 요청 정보 객체
const reqInfo = {
method: 'POST'
, headers: {
'content-type' : 'application/json'
}
, body: JSON.stringify(replyData)
};
fetch(URL, reqInfo)
} -->
== // 댓글을 작성했을 때 내가 작성한 페이지로 조회 되도록 하기
'Spring' 카테고리의 다른 글
| [Spring ] 파일 업로드/다운로드 _ 22.08.02 [14일차] (0) | 2022.08.02 |
|---|---|
| [Spring / 댓글 비동기요청 - 결석[코드 총 복붙 공부용]] _ 22.08.01 [14일차] (0) | 2022.08.02 |
| [Spring / 댓글 비동기요청 #1] _ 22.07.29 [13일차] (0) | 2022.07.29 |
| [Spring / 비동기 # 12] fetch(GET)_실무!_22.07.29 [13일차] (0) | 2022.07.29 |
| [Spring / 비동기 #11] 플로저와 Promise_22.07.29 [13일차] (0) | 2022.07.29 |