Q&A 게시판 댓글 작성 기능

2026-06-05 17:41:37 +09:00
parent 480d7dac5a
commit ec8d6bfd7b
7 changed files with 277 additions and 0 deletions
@@ -36,6 +36,13 @@
 			padding-bottom: 10px;
 			border-bottom: 2px solid #e0e0e0; /* 제목 아래 줄 긋기 */
 		}
+		
+		.comment-section {
+			margin-bottom: 30px;
+			border: 1px solid #e0e0e0; /* 동일한 박스 스타일 */
+			padding: 20px;
+			border-radius: 5px;
+		}

 		.info-row {
 			margin-bottom: 10px;
@@ -57,6 +64,15 @@
 			width: 100%;
 			min-height: 200px;
 		}
+		
+		#commentDetail {
+			min-height: 100px;
+			border: 1px solid #00000032;
+			border-radius: 4px; 
+			padding: 10px;
+			flex: 1;
+			font-family: '맑은고딕'
+		}

 		.required-mark {
 			color: red;
@@ -94,6 +110,8 @@
 					var decodedContent = decodeHTMLEntities(data.responseDetail);
 					$("#responseDetail").summernote('code', decodedContent || '');

+					// 댓글 표시
+					listComment(key);

 					// 첨부 파일 표시
 					displayAttachFiles(data.fileInfo);
@@ -104,6 +122,55 @@
 				}
 			});
 		}
+		
+		function listComment(inquiryId) {
+			$.ajax({
+				type: "POST",
+				url: url,
+				dataType: "json",
+				data: {cmd: 'LIST_COMMENT', id: inquiryId},
+				success: function (data) {
+					var $commentList = $('#commentList');
+					$commentList.empty();
+					if (!data || data.length === 0) return;
+					$.each(data, function (i, comment) {
+						var date = comment.createdDate ? timeStampFormat(comment.createdDate) : '';
+						var row = $('<div>').addClass('info-row');
+						$('<div>').addClass('info-label').css('color', '#555').text(comment.writerName || '').appendTo(row);
+						var content = $('<div>').addClass('info-content');
+						$('<div>').css('white-space', 'pre-wrap').text(comment.commentDetail).appendTo(content);
+						var meta = $('<div>').css({'font-size': '0.9em', 'color': '#999', 'margin-top': '2px'});
+						$('<span>').text(date).appendTo(meta);
+						$('<button>').attr('type', 'button').addClass('cssbtn smallBtn2').css({'margin-left': '8px', 'font-size': '0.85em', 'padding': '1px 6px'})
+							.text('delete').on('click', (function(id, inquiryId) {
+								return function() { deleteComment(id, inquiryId); };
+							})(comment.id, comment.inquiryId))
+							.appendTo(meta);
+						meta.appendTo(content);
+						content.appendTo(row);
+						row.appendTo($commentList);
+					});
+				},
+				error: function (e) {
+					alert(e.responseText);
+				}
+			});
+		}
+
+		function deleteComment(commentId, inquiryId) {
+			if (!confirm("댓글을 삭제하시겠습니까?")) return;
+			$.ajax({
+				type: "POST",
+				url: url,
+				data: {cmd: 'DELETE_COMMENT', id: commentId},
+				success: function () {
+					listComment(inquiryId);
+				},
+				error: function (e) {
+					alert(e.responseText);
+				}
+			});
+		}

 		$(document).ready(function () {
 			var returnUrl = getReturnUrlForReturn();
@@ -114,6 +181,7 @@
 				placeholder: '여기에 답변을 입력하세요.',
 				height: 200
 			});
+			

 			if (key) {
 				detail(key);
@@ -139,6 +207,29 @@
 					}
 				});
 			});
+			
+			$("#btn_comment").click(function () {
+				
+				if (!confirm("<%= localeMessage.getString("common.checkSave")%>")) return;
+
+				$.ajax({
+					type: "POST",
+					url: url,
+					data: {
+						cmd: "INSERT_COMMENT",
+						inquiryId: $('#id').val(),
+						commentDetail: $('#commentDetail').val(),
+					},
+					success: function (json) {
+						alert("<%= localeMessage.getString("common.saveMsg") %>");
+						$('#commentDetail').val('');
+						listComment(key);
+					},
+					error: function (e) {
+						alert(e.responseText);
+					}
+				});
+			});

 			$("#btn_previous").click(function () {
 				goNav(returnUrl);
@@ -221,6 +312,19 @@
 					</div>
 				</div>
 			</div>
+			
+			<!-- 댓글 작성 부분 -->
+			<div class="comment-section">
+				<div id="commentList"></div>
+				<div class="info-row">
+					<div class="info-label">${sessionScope.login.userName}</div>
+					<div style="flex:1; display: flex; gap: 8px; align-items: stretch;">
+						<textarea id="commentDetail" name="commentDetail" data-required data-warning="댓글 내용을 입력하여 주십시오."></textarea>
+						<button type="button" class="cssbtn" id="btn_comment" level="W" style="width:100px; height: 100px; text-align:center; ">댓글등록</button>
+					</div>
+				</div>
+			</div>
+			
 			<input type="hidden" name="id" id="id">
 		</form>
 	</div>