공지사항 페이지 디자인 수정.

강석 최 2022-12-06 19:23:10 +09:00
parent 3736e78288
commit f41773f90b
5 changed files with 166 additions and 135 deletions

View File

@ -26,13 +26,13 @@ $(document).on('click', '#commentSaveBtn', function (){
xhr.setRequestHeader($("[name='_csrf_header']").val(), $("[name='_csrf']").val()); xhr.setRequestHeader($("[name='_csrf_header']").val(), $("[name='_csrf']").val());
}, },
success : function(html) { success : function(html) {
$("#commentDiv").append(html)
const parentComment = $("#parentComment"); const parentComment = $("#parentComment");
if(parentComment.val()){ if(!parentComment.val()){
commentFormReset(); $("#commentDiv").append(html)
parentComment.val(''); }else{
$("#commentFormHome").append($("#commentForm")) $("#addedCommentHome"+parentComment.val()).append(html);
} }
commentFormReset();
alert("저장되었습니다."); alert("저장되었습니다.");
contentFade("out"); contentFade("out");
}, },
@ -46,11 +46,11 @@ $(document).on('click', '#commentSaveBtn', function (){
}) })
$(document).on('click', '.childCommentBtn', function (){ $(document).on('click', '.childCommentBtn', function (){
const childCommentDiv = $(this).parents(".commentRow").find(".childCommentDiv") const childCommentFormDiv = $(this).parents(".commentRow").find(".childCommentFormDiv")
childCommentDiv.show(); childCommentFormDiv.show();
$("#parentComment").val($(this).parents(".commentRow").find(".commentKey").val()); $("#parentComment").val($(this).parents(".commentRow").find(".commentKey").val());
$("#childFormRemoveBtn").show(); $("#childFormRemoveBtn").show();
childCommentDiv.empty().append($("#commentForm")) childCommentFormDiv.empty().append($("#commentForm"))
}) })
$(document).on('click', '#childFormRemoveBtn', function (){ $(document).on('click', '#childFormRemoveBtn', function (){
commentFormReset(); commentFormReset();
@ -59,7 +59,7 @@ $(document).on('click', '.deleteCommentBtn', function (){
const commentRow = $(this).parents(".commentRow"); const commentRow = $(this).parents(".commentRow");
const publicKey = Number(commentRow.find(".publicKey").val()); const publicKey = Number(commentRow.find(".publicKey").val());
const commentKey = Number(commentRow.find(".commentKey").val()); const commentKey = Number(commentRow.find(".commentKey").val());
$.ajax({ /*$.ajax({
type : 'POST', type : 'POST',
data : JSON.stringify({publicKey: publicKey, commentKey: commentKey}), data : JSON.stringify({publicKey: publicKey, commentKey: commentKey}),
url : "/publicBoard/deleteComment", url : "/publicBoard/deleteComment",
@ -76,7 +76,7 @@ $(document).on('click', '.deleteCommentBtn', function (){
alert("삭제를 실패하였습니다.") alert("삭제를 실패하였습니다.")
contentFade("out"); contentFade("out");
} }
}) })*/
}) })
function getEditModal(publicKey, publicType){ function getEditModal(publicKey, publicType){

View File

@ -1,57 +1,68 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"> <html lang="ko" xmlns:th="http://www.thymeleaf.org">
<th:block th:if="${comment.parentComment eq null}"> <th:block th:if="${comment.parentComment eq null}">
<div class="row justify-content-start commentRow"> <div class="row justify-content-between mx-3 commentRow">
<input type="hidden" class="publicKey" th:value="${comment.publicKey}"> <input type="hidden" class="publicKey" th:value="${comment.publicKey}">
<input type="hidden" class="commentKey" th:value="${comment.commentKey}"> <input type="hidden" class="commentKey" th:value="${comment.commentKey}">
<th:block th:each="commonCode:${session.commonCode.get('OG')}"> <div class="col-auto">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div> <div class="row">
</th:block> <div class="col-auto" th:utext="${comment.comment}"></div>
<th:block th:each="commonCode:${session.commonCode.get('OFC')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtPart}" th:text="${commonCode.itemValue}"></div>
</th:block>
<th:block th:each="commonCode:${session.commonCode.get('JT')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block>
<div class="col-auto" th:text="${comment.wrtUserNm}"></div>
<div class="col-auto" th:text="|작성일시: ${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}|"></div>
<div class="col-auto"> <div class="col-auto">
<button type="button" class="btn btn-sm btn-success childCommentBtn">댓글달기</button> <button type="button" class="btn btn-sm btn-success childCommentBtn">댓글달기</button>
</div> </div>
<div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}"> <div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button> <button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div> </div>
<div class="col-12" th:utext="${comment.comment}"></div>
<div class="col-12 childCommentDiv" style="display: none"></div>
<hr>
</div> </div>
</th:block>
<th:block th:unless="${comment.parentComment eq null}">
<div class="row justify-content-start">
<div class="col-auto">
<i class="bi bi-arrow-return-right" ></i>
</div> </div>
<div class="col-auto"> <div class="col-auto">
<div class="row justify-content-start commentRow"> <div class="row">
<input type="hidden" class="publicKey" th:value="${comment.publicKey}">
<input type="hidden" class="commentKey" th:value="${comment.commentKey}">
<th:block th:each="commonCode:${session.commonCode.get('OG')}"> <th:block th:each="commonCode:${session.commonCode.get('OG')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
<th:block th:each="commonCode:${session.commonCode.get('OFC')}"> <!--<th:block th:each="commonCode:${session.commonCode.get('OFC')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtPart}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtPart}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>-->
<th:block th:each="commonCode:${session.commonCode.get('JT')}"> <th:block th:each="commonCode:${session.commonCode.get('JT')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
<div class="col-auto" th:text="${comment.wrtUserNm}"></div> <div class="col-auto" th:text="${comment.wrtUserNm}"></div>
<div class="col-auto" th:text="|작성일시: ${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}|"></div> <div class="col-auto" th:text="${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
<div class="col-12 childCommentFormDiv py-1" style="display: none"></div>
</div>
<hr class="my-1">
</th:block>
<th:block th:unless="${comment.parentComment eq null}">
<div class="row justify-content-between commentRow my-1 mx-3">
<input type="hidden" class="publicKey" th:value="${comment.publicKey}">
<input type="hidden" class="commentKey" th:value="${comment.commentKey}">
<div class="col-auto">
<div class="row">
<div class="col-auto">
<i class="bi bi-arrow-return-right" ></i>
</div>
<div class="col-auto" th:utext="${comment.comment}"></div>
<div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}"> <div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button> <button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div> </div>
<div class="col-12" th:utext="${comment.comment}"></div>
</div> </div>
</div> </div>
<hr> <div class="col-auto">
<div class="row">
<th:block th:each="commonCode:${session.commonCode.get('OG')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div>
</th:block>
<!--<th:block th:each="commonCode:${session.commonCode.get('OFC')}">
<div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtPart}" th:text="${commonCode.itemValue}"></div>
</th:block>-->
<th:block th:each="commonCode:${session.commonCode.get('JT')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block>
<div class="col-auto" th:text="${comment.wrtUserNm}"></div>
<div class="col-auto" th:text="${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div> </div>
</th:block> </th:block>

View File

@ -36,20 +36,20 @@
</div> </div>
<div class="mb-1 row"> <div class="mb-1 row">
<label for="title" class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label> <label for="title" class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
<div class="col-sm-10"> <div class="col-sm-11">
<input type="text" class="form-control form-control-sm" id="title" name="title" th:value="${info.title}" autocomplete="off"> <input type="text" class="form-control form-control-sm" id="title" name="title" th:value="${info.title}" autocomplete="off">
</div> </div>
</div> </div>
<div class="mb-1 row"> <div class="mb-1 row">
<label for="editor" class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label> <label for="editor" class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label>
<div class="col-sm-10"> <div class="col-sm-11">
<div id="editor"></div> <div id="editor"></div>
<textarea id="content" class="d-none" th:utext="${info.content}"></textarea> <textarea id="content" class="d-none" th:utext="${info.content}"></textarea>
</div> </div>
</div> </div>
<div class="row mb-1"> <div class="row mb-1">
<label for="fileInputer" class="col-sm-1 col-form-label col-form-label-sm text-center">업로드 자료</label> <label for="fileInputer" class="col-sm-1 col-form-label col-form-label-sm text-center">업로드 자료</label>
<div class="col-sm-10" style="min-height: 70px;"> <div class="col-sm-11" style="min-height: 70px;">
<div class="w-100 h-100 border border-info rounded text-center" id="uploadDiv"> <div class="w-100 h-100 border border-info rounded text-center" id="uploadDiv">
<th:block th:if="${#arrays.isEmpty(info.fileList)}"> <th:block th:if="${#arrays.isEmpty(info.fileList)}">
<br>클릭 또는 드레그하여 파일을 업로드 해주세요. <br>클릭 또는 드레그하여 파일을 업로드 해주세요.

View File

@ -147,7 +147,7 @@
</div> </div>
</div> </div>
<div class="modal fade" id="viewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true"> <div class="modal fade" id="viewModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="viewModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xxl modal-dialog-scrollable"> <div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content" id="viewContent"> <div class="modal-content" id="viewContent">
</div> </div>

View File

@ -5,12 +5,17 @@
<button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button> <button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
</div> </div>
<div class="modal-body"> <div class="modal-body">
<div class="row">
<div class="col-12">
<input type="hidden" name="publicKeyKey" id="viewModalPublicKey" th:value="${info.publicKey}"> <input type="hidden" name="publicKeyKey" id="viewModalPublicKey" th:value="${info.publicKey}">
<hr class="my-1"> <ul class="nav nav-tabs" id="userTab" role="tablist">
<div class="row"> <li class="nav-item" role="presentation">
<div class="col-8"> <button class="nav-link active" id="boardTab" data-bs-toggle="tab" data-bs-target="#boardTabPanel" type="button" role="tab" aria-controls="boardTabPanel" aria-selected="true">본문</button>
</li>
<li class="nav-item" role="presentation" th:if="${#lists.size(info.fileList)>0}">
<button class="nav-link" id="fileTab" data-bs-toggle="tab" data-bs-target="#fileTabPanel" type="button" role="tab" aria-controls="fileTabPanel" aria-selected="false" th:text="${#strings.concat('첨부파일(', #lists.size(info.fileList), ')')}"></button>
</li>
</ul>
<div class="tab-content bg-white border border-top-0 p-2">
<div class="tab-pane fade p-2 show active" id="boardTabPanel" role="tabpanel" tabindex="0">
<div class="row mb-1"> <div class="row mb-1">
<div class="col-sm-9"></div> <div class="col-sm-9"></div>
<label for="wrtDt" class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label> <label for="wrtDt" class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
@ -31,16 +36,16 @@
</th:block> </th:block>
<th:block th:text="${info.wrtUserNm}"></th:block> <th:block th:text="${info.wrtUserNm}"></th:block>
</div> </div>
</div>
<hr class="my-1"> <hr class="my-1">
<div class="row mb-1">
<label for="content" class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label> <label for="content" class="col-sm-1 col-form-label col-form-label-sm text-center">내용</label>
<div class="col-sm-10 form-control-sm"> <div class="col-sm-10 form-control-sm">
<div id="content" th:utext="${info.content}"></div> <div id="content" th:utext="${info.content}"></div>
</div> </div>
</div> </div>
</div> </div>
<div class="col-4 border-start"> <div class="tab-pane fade p-2" id="fileTabPanel" role="tabpanel" tabindex="0">
<div class="row">
<div class="col-12">
<table class="table table-sm"> <table class="table table-sm">
<thead> <thead>
<tr> <tr>
@ -68,29 +73,43 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<hr class="my-1"> <hr class="my-1">
<div class="row justify-content-start"> <div class="row justify-content-start">
<div class="col-12" id="commentFormHome"> <div class="col-12 mx-3" id="commentFormHome">
<form action="#" method="post" id="commentForm"> <form action="#" method="post" id="commentForm">
<div class="row mx-3"> <div class="row">
<div class="col-6"> <div class="col-11">
<input type="hidden" name="publicKey" th:value="${info.publicKey}"> <input type="hidden" name="publicKey" th:value="${info.publicKey}">
<input type="hidden" name="parentComment" id="parentComment"> <input type="hidden" name="parentComment" id="parentComment">
<input type="text" class=" form-control form-control-sm" id="comment" name="comment" placeholder="댓글작성"> <input type="text" class=" form-control form-control-sm" id="comment" name="comment" placeholder="댓글작성">
</div> </div>
<div class="col-auto"> <div class="col-1 d-grid gap-0">
<div class="input-group">
<input type="button" class="btn btn-sm btn-primary" id="commentSaveBtn" value="작성"> <input type="button" class="btn btn-sm btn-primary" id="commentSaveBtn" value="작성">
<input type="button" class="btn btn-sm btn-warning" id="childFormRemoveBtn" value="취소" style="display: none"> <input type="button" class="btn btn-sm btn-warning" id="childFormRemoveBtn" value="취소" style="display: none">
</div> </div>
</div> </div>
</div>
</form> </form>
</div> </div>
<div class="col-12 form-control-sm pt-2" id="commentDiv"> <div class="col-12 form-control-sm pt-2" id="commentDiv">
<th:block th:each="comment:${info.commentList}"> <th:block th:each="comment:${info.commentList}">
<div class="row justify-content-start mx-3 commentRow"> <div class="row justify-content-between mx-3 commentRow">
<input type="hidden" class="publicKey" th:value="${comment.publicKey}"> <input type="hidden" class="publicKey" th:value="${comment.publicKey}">
<input type="hidden" class="commentKey" th:value="${comment.commentKey}"> <input type="hidden" class="commentKey" th:value="${comment.commentKey}">
<div class="col-auto">
<div class="row">
<div class="col-auto" th:utext="${comment.comment}"></div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-success childCommentBtn">댓글달기</button>
</div>
<div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div>
</div>
</div>
<div class="col-auto">
<div class="row">
<th:block th:each="commonCode:${session.commonCode.get('OG')}"> <th:block th:each="commonCode:${session.commonCode.get('OG')}">
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtOrgan}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
@ -101,24 +120,28 @@
<div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq comment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
<div class="col-auto" th:text="${comment.wrtUserNm}"></div> <div class="col-auto" th:text="${comment.wrtUserNm}"></div>
<div class="col-auto" th:text="|작성일시: ${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}|"></div> <div class="col-auto" th:text="${#temporals.format(comment.wrtDt, 'yyyy-MM-dd HH:mm')}"></div>
<div class="col-auto">
<button type="button" class="btn btn-sm btn-success childCommentBtn">댓글달기</button>
</div> </div>
<div class="col-auto" th:if="${userSeq eq comment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div> </div>
<div class="col-12" th:utext="${comment.comment}"></div> <div class="col-12 childCommentFormDiv py-1" style="display: none"></div>
<div class="col-12 childCommentDiv" style="display: none"></div> </div>
<th:block th:each="childComment:${comment.childCommentList}"> <th:block th:each="childComment:${comment.childCommentList}">
<div class="row justify-content-start my-1"> <div class="row justify-content-between commentRow my-1 mx-3">
<input type="hidden" class="publicKey" th:value="${childComment.publicKey}">
<input type="hidden" class="commentKey" th:value="${childComment.commentKey}">
<div class="col-auto">
<div class="row">
<div class="col-auto"> <div class="col-auto">
<i class="bi bi-arrow-return-right" ></i> <i class="bi bi-arrow-return-right" ></i>
</div> </div>
<div class="col-auto" th:utext="${childComment.comment}"></div>
<div class="col-auto" th:if="${userSeq eq childComment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div>
</div>
</div>
<div class="col-auto"> <div class="col-auto">
<div class="row justify-content-start commentRow"> <div class="row">
<input type="hidden" class="publicKey" th:value="${childComment.publicKey}">
<input type="hidden" class="commentKey" th:value="${childComment.commentKey}">
<th:block th:each="commonCode:${session.commonCode.get('OG')}"> <th:block th:each="commonCode:${session.commonCode.get('OG')}">
<div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtOrgan}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtOrgan}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
@ -129,21 +152,18 @@
<div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div> <div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block> </th:block>
<div class="col-auto" th:text="${childComment.wrtUserNm}"></div> <div class="col-auto" th:text="${childComment.wrtUserNm}"></div>
<div class="col-auto" th:text="|작성일시: ${#temporals.format(childComment.wrtDt, 'yyyy-MM-dd HH:mm')}|"></div> <div class="col-auto" th:text="${#temporals.format(childComment.wrtDt, 'yyyy-MM-dd HH:mm')}"></div>
<div class="col-auto" th:if="${userSeq eq childComment.wrtUserSeq}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div>
<div class="col-12" th:utext="${childComment.comment}"></div>
</div> </div>
</div> </div>
</div> </div>
</th:block> </th:block>
<div th:id="|addedCommentHome${comment.commentKey}|"></div>
<hr class="my-1"> <hr class="my-1">
</div>
</th:block> </th:block>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="modal-footer bg-light"> <div class="modal-footer bg-light">
<th:block th:if="${userSeq eq info.wrtUserSeq}"><!--작성자일 경우 수정 허용--> <th:block th:if="${userSeq eq info.wrtUserSeq}"><!--작성자일 경우 수정 허용-->
<button type="button" class="btn btn-warning" id="editBtn">수정</button> <button type="button" class="btn btn-warning" id="editBtn">수정</button>