[Spring] 27. 게시물/댓글 - 작성자가 일치하면 수정/삭제

register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<jsp:include page="../layout/header.jsp"></jsp:include>
<jsp:include page="../layout/nav.jsp"></jsp:include>
<h2>글쓰기</h2>
<hr>
<div class="container-md">
<sec:authorize access="isAuthenticated()">
<sec:authentication property="principal.mvo.email" var="authEmail"/>
	<form action="/board/register" method="post" enctype="multipart/form-data">
		<div class="mb-3">
			<label for="title" class="form-label">제목</label> 
			<input
				type="text" name="title" class="form-control" id="title">
		</div>
		<div class="mb-3">
			<label for="writer" class="form-label">작성자</label> 
			<input
				type="text" name="writer" class="form-control" id="writer" value="${authEmail }" readonly="readonly">
		</div>
		<div class="mb-3">
			<label for="content" class="form-label">내용</label>
			<textarea name="content" class="form-control" id="content" rows="3"></textarea>
		</div>
		
		<!-- file 입력 라인 추가 -->
 		<div class="mb-3">
			<input type="file" name="files" class="form-control" id="files" multiple="multiple" style="display: none"><br>
			<!-- 파일 버튼 트리거 사용하기 위해서 주는 버튼 -->
			<button type="button" class="btn btn-primary" id="trigger">파일 업로드</button>
		</div>

		<!-- 파일 목록 표시라인 -->
 		<div class="mb-3" id="fileZone">
 			
		</div>
		<button type="submit" class="btn btn-primary" id="regBtn">등록</button>
		<a href="/"><button type="button" class="btn btn-danger">취소</button></a>
		
	</form>
	</sec:authorize>
</div>
<script src="/resources/js/boardFile.js"></script>
<jsp:include page="../layout/footer.jsp"></jsp:include>

 

detail.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/security/tags" prefix="sec" %>
<jsp:include page="../layout/header.jsp"></jsp:include>
<jsp:include page="../layout/nav.jsp"></jsp:include>

<div class="container-md">
<c:set value="${bdto.bvo }" var="bvo"></c:set>
<sec:authorize access="isAuthenticated()">
<sec:authentication property="principal.mvo.email" var="authEmail"/>
	<div class="mb-3">
		<label for="bno" class="form-label">No.</label> 
		<input type="text" name="bno" class="form-control" 
			id="bno" readonly value="${bvo.bno }">
	</div>
	<div class="mb-3">
		<label for="title" class="form-label">제목</label>
		<input type="text" name="title" class="form-control" 
			id="title" readonly value="${bvo.title }">
	</div>
	<div class="mb-3">
		<label for="writer" class="form-label">작성자</label>
		<input type="text" name="writer" class="form-control" 
			id="writer" readonly value="${bvo.writer }">
	</div>
	<div class="mb-3">
		<label for="reg_date" class="form-label">작성일</label> 
		<span class="badge text-bg-primary">${bvo.readCount }</span> 
		<input type="text" name="reg_date" class="form-control" 
			id="reg_date" readonly value="${bvo.regAt }">
	</div>
	<div class="mb-3">
		<label for="mod_date" class="form-label">수정일</label> 
		<input type="text" name="mod_date" class="form-control" 
			id="mod_date" readonly value="${bvo.modAt }">
	</div>
	<div class="mb-3">
		<label for="content" class="form-label">내용</label>
		<input type="text" name="content" class="form-control" 
			id="content" readonly value="${bvo.content }">
	</div>
	
	<!-- 파일 line -->
<!-- ... (기존 코드) -->
								<div>
									<!-- 일반 파일을 표시할 아이콘 -->
                                        <!-- ... (기존 코드) -->
		</div>
	<c:if test="${bvo.writer eq authEmail}">
	<a href="/board/modify?bno=${bvo.bno }"><button type="submit" class="btn btn-success">수정</button></a> 
	<a href="/board/remove?bno=${bvo.bno }"><button type="button" class="btn btn-danger">삭제</button></a>
	</c:if>
	<a href="/board/list"><button type="submit" class="btn btn-primary">목록</button></a>
	<br><br><hr>
	<!-- 댓글 등록 라인 -->
    <c:choose>
	<c:when test="${not empty authEmail}">
		<div class="input-group mb-3">
			<span class="input-group-text" id="cmtWriter">${authEmail }</span> 
			<input type="text" class="form-control" id="cmtText" aria-label="Amount (to the nearest dollar)">
			<button type="button" class="btn btn-success" id="cmtPostBtn">등록</button>
		</div>
	</c:when>
	<c:otherwise>
		<div class="input-group mb-3">
			<input type="text" class="form-control" id="cmtText" aria-label="Amount (to the nearest dollar)"
			placeholder="로그인 후, 댓글을 입력해주세요." readonly="readonly">
			<button type="button" class="btn btn-success" id="cmtPostBtn" disabled="disabled">등록</button>
		</div>
	</c:otherwise>
	</c:choose>

	<!-- 댓글 표시 라인 -->
	<ul class="list-group list-group-flush" id="cmtListArea">
		<li class="list-group-item">
			<div class="mb-3">
				<div class="fw-bold">Writer <span class="badge rounded-pill text-bg-warning">댓글등록일</span></div>
				content
			</div>
		</li>
	</ul>
	
		<!-- 댓글 더보기 버튼 -->
	<div>
		<button type="button" id="moreBtn" data-page="1"
			class="btn btn-outline-dark" style="visibility:hidden">댓글 더보기</button>
	</div>
	
	<!-- 모달창 라인 -->
	<div class="modal" id="myModal" tabindex="-1">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<h5 class="modal-title">${authEmail }</h5>
					<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
				</div>
				<div class="modal-body">
					<div class="input-group mb-3">
						<input type="text" class="form-control" id="cmtModText">
						<button type="button" class="btn btn-primary" id="cmtModBtn">등록</button>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
				</div>
			</div>
		</div>
	</div>
	</sec:authorize>
</div>

<script type="text/javascript">
	 let bnoVal = `<c:out value="${bvo.bno}"/>`;
	 let userEmail = `<c:out value="${authEmail}"/>`;
	 console.log(bnoVal);
</script>
<script src="/resources/js/boardComment.js"></script>
<script type="text/javascript">
	spreadCommentList(bnoVal);
</script>
<jsp:include page="../layout/footer.jsp"></jsp:include>

 

boardComment.js

console.log('boardComment.js in~!!');
console.log(bnoVal);
console.log(userEmail);

document.getElementById('cmtPostBtn').addEventListener('click',()=>{
    const cmtText = document.getElementById('cmtText');
    if(cmtText.value == null || cmtText.value == '') {
        alert('댓글을 입력해주세요');
        cmtText.focus();
        return false;
    } else {
        let cmtData = {
            bno : bnoVal,
            writer : userEmail,
            content : cmtText.value
        };
        console.log(cmtData);
        // 댓글 등록
        postCommentToServer(cmtData).then(result =>{
            if(result == '1') {
                console.log('댓글 등록 성공~!!');
                cmtText.value = "";
            }
            // 화면에 뿌려
            spreadCommentList(cmtData.bno);
        })
    }
});

// ... (기존 코드)

function spreadCommentList(bno, page=1) {
    getCommentListFromServer(bno, page).then(result=>{
        console.log(result.cmtList);
        const ul = document.getElementById('cmtListArea');
        if(result.cmtList.length > 0) {
            if(page == 1) {
                ul.innerHTML = '';
            }
            for(let cvo of result.cmtList) {
                let li = `<li class="list-group-item" data-cno="${cvo.cno}" data-writer="${cvo.writer}">`;
                li += `<div class="mb-3">`;
                li += `<div class="fw-bold">${cvo.writer} `;
                li += `<span class="badge rounded-pill text-bg-warning">${cvo.regAt}</span></div>`;
                li += `${cvo.content}`;
                li += `</div>`;
                if (cvo.writer == userEmail) {
                    li += `<button type="button" class="btn btn-sm btn-outline-success cmtModBtn" data-bs-toggle="modal" data-bs-target="#myModal">수정</button>`;
                    li += `<button type="button" class="btn btn-sm btn-outline-danger cmtDelBtn">삭제</button>`;
                }
                li += `</li>`;
                ul.innerHTML += li;
            }   
            
            // 더보기 버튼
            let moreBtn = document.getElementById('moreBtn');
            console.log(moreBtn);
            if(result.pgvo.pageNo < result.endPage) {
                moreBtn.style.visibility = 'visible';
                moreBtn.dataset.page = page + 1;
            } else {
                moreBtn.style.visibility = 'hidden';
            }

        } else {
            if(page == 1) {
            let li = `<li class="list-group-item">댓글이 없습니다.</li>`;
            ul.innerHTML = li;
            }
        }
    })
};

// ... (기존 코드)

 

 

 

[Spring] 27. 게시물/댓글 - 작성자가 일치하면 수정/삭제

(다음 게시물 예고편)
[Spring] 28. 회원가입 - 아이디/비밀번호 중복체크