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

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

View File

@ -1,57 +1,68 @@
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<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="commentKey" th:value="${comment.commentKey}">
<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 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">
<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 class="col-12" th:utext="${comment.comment}"></div>
<div class="col-12 childCommentDiv" style="display: none"></div>
<hr>
</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 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 justify-content-start commentRow">
<input type="hidden" class="publicKey" th:value="${comment.publicKey}">
<input type="hidden" class="commentKey" th:value="${comment.commentKey}">
<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')}">
<!--<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: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" 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}">
<button type="button" class="btn btn-sm btn-danger deleteCommentBtn">댓글삭제</button>
</div>
<div class="col-12" th:utext="${comment.comment}"></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>
</th:block>

View File

@ -36,20 +36,20 @@
</div>
<div class="mb-1 row">
<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">
</div>
</div>
<div class="mb-1 row">
<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>
<textarea id="content" class="d-none" th:utext="${info.content}"></textarea>
</div>
</div>
<div class="row mb-1">
<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">
<th:block th:if="${#arrays.isEmpty(info.fileList)}">
<br>클릭 또는 드레그하여 파일을 업로드 해주세요.

View File

@ -147,7 +147,7 @@
</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-dialog modal-xxl modal-dialog-scrollable">
<div class="modal-dialog modal-xl modal-dialog-scrollable">
<div class="modal-content" id="viewContent">
</div>

View File

@ -5,42 +5,47 @@
<button type="button" class="btn-close f-invert" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-12">
<input type="hidden" name="publicKeyKey" id="viewModalPublicKey" th:value="${info.publicKey}">
<hr class="my-1">
<div class="row">
<div class="col-8">
<div class="row mb-1">
<div class="col-sm-9"></div>
<label for="wrtDt" class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
<div class="col-sm-2">
<input type="text" class=" form-control form-control-sm border-0" id="wrtDt" name="wrtDt" th:value="${#temporals.format(info.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
</div>
<label for="title" class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
<div class="col-sm-8">
<input type="text" class=" form-control form-control-sm border-0" id="title" name="title" th:value="${info.title}" readonly>
</div>
<label class="col-sm-1 col-form-label col-form-label-sm text-center">작성자</label>
<div class="col-sm-2 form-control-sm">
<th:block th:each="commonCode:${session.commonCode.get('OG')}">
<th:block th:if="${commonCode.itemCd eq info.wrtOrgan}" th:text="${commonCode.itemValue}"></th:block>
</th:block>
<th:block th:each="commonCode:${session.commonCode.get('JT')}">
<th:block th:if="${commonCode.itemCd eq info.wrtUserGrd}" th:text="${commonCode.itemValue}"></th:block>
</th:block>
<th:block th:text="${info.wrtUserNm}"></th:block>
</div>
</div>
<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>
<div class="col-sm-10 form-control-sm">
<div id="content" th:utext="${info.content}"></div>
</div>
</div>
<input type="hidden" name="publicKeyKey" id="viewModalPublicKey" th:value="${info.publicKey}">
<ul class="nav nav-tabs" id="userTab" role="tablist">
<li class="nav-item" role="presentation">
<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="col-sm-9"></div>
<label for="wrtDt" class="col-sm-1 col-form-label col-form-label-sm text-center">작성일시</label>
<div class="col-sm-2">
<input type="text" class=" form-control form-control-sm border-0" id="wrtDt" name="wrtDt" th:value="${#temporals.format(info.wrtDt, 'yyyy-MM-dd HH:mm')}" readonly>
</div>
<div class="col-4 border-start">
<label for="title" class="col-sm-1 col-form-label col-form-label-sm text-center">제목</label>
<div class="col-sm-8">
<input type="text" class=" form-control form-control-sm border-0" id="title" name="title" th:value="${info.title}" readonly>
</div>
<label class="col-sm-1 col-form-label col-form-label-sm text-center">작성자</label>
<div class="col-sm-2 form-control-sm">
<th:block th:each="commonCode:${session.commonCode.get('OG')}">
<th:block th:if="${commonCode.itemCd eq info.wrtOrgan}" th:text="${commonCode.itemValue}"></th:block>
</th:block>
<th:block th:each="commonCode:${session.commonCode.get('JT')}">
<th:block th:if="${commonCode.itemCd eq info.wrtUserGrd}" th:text="${commonCode.itemValue}"></th:block>
</th:block>
<th:block th:text="${info.wrtUserNm}"></th:block>
</div>
<hr class="my-1">
<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 id="content" th:utext="${info.content}"></div>
</div>
</div>
</div>
<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">
<thead>
<tr>
@ -68,57 +73,75 @@
</div>
</div>
</div>
</div>
<hr class="my-1">
<div class="row justify-content-start">
<div class="col-12" id="commentFormHome">
<form action="#" method="post" id="commentForm">
<div class="row mx-3">
<div class="col-6">
<input type="hidden" name="publicKey" th:value="${info.publicKey}">
<input type="hidden" name="parentComment" id="parentComment">
<input type="text" class=" form-control form-control-sm" id="comment" name="comment" placeholder="댓글작성">
<hr class="my-1">
<div class="row justify-content-start">
<div class="col-12 mx-3" id="commentFormHome">
<form action="#" method="post" id="commentForm">
<div class="row">
<div class="col-11">
<input type="hidden" name="publicKey" th:value="${info.publicKey}">
<input type="hidden" name="parentComment" id="parentComment">
<input type="text" class=" form-control form-control-sm" id="comment" name="comment" placeholder="댓글작성">
</div>
<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-warning" id="childFormRemoveBtn" value="취소" style="display: none">
</div>
</div>
</div>
<div class="col-auto">
<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">
</form>
</div>
<div class="col-12 form-control-sm pt-2" id="commentDiv">
<th:block th:each="comment:${info.commentList}">
<div class="row justify-content-between mx-3 commentRow">
<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" 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')}">
<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 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>
</div>
<div class="col-12 childCommentFormDiv py-1" style="display: none"></div>
</div>
</div>
</form>
</div>
<div class="col-12 form-control-sm pt-2" id="commentDiv">
<th:block th:each="comment:${info.commentList}">
<div class="row justify-content-start mx-3 commentRow">
<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')}">
<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 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">
<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 class="col-12" th:utext="${comment.comment}"></div>
<div class="col-12 childCommentDiv" style="display: none"></div>
<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">
<i class="bi bi-arrow-return-right" ></i>
<div class="row">
<div class="col-auto">
<i class="bi bi-arrow-return-right" ></i>
</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="row justify-content-start commentRow">
<input type="hidden" class="publicKey" th:value="${childComment.publicKey}">
<input type="hidden" class="commentKey" th:value="${childComment.commentKey}">
<div class="row">
<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>
</th:block>
@ -129,18 +152,15 @@
<div class="col-auto" th:if="${commonCode.itemCd eq childComment.wrtUserGrd}" th:text="${commonCode.itemValue}"></div>
</th:block>
<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: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 class="col-auto" th:text="${#temporals.format(childComment.wrtDt, 'yyyy-MM-dd HH:mm')}"></div>
</div>
</div>
</div>
</th:block>
<div th:id="|addedCommentHome${comment.commentKey}|"></div>
<hr class="my-1">
</div>
</th:block>
</th:block>
</div>
</div>
</div>
</div>