댓글 조회 기능

src/main/webapp/WEB-INF/view/jh/board/detailView.jsp

@@ -66,17 +66,17 @@
 				<button type="button">등록</button>
 			</div>
 			
-			<div class="comment-view" id="test3">
+<!-- 			<div class="comment-view" id="test3">
 				<span class="user"><span class="id">익명3</span><span
 					class="date">05.02 13:00</span><span>답글</span></span> <span class="text" id="text">여기는 댓글
 					정보3333!</span>
-<!--  				** -->
+ 				**
 				<div class="reply-box">
-<!-- 					<button type="button">답글</button> -->
+					<button type="button">답글</button>
-<!-- 					<div class="reply-input"> -->
+					<div class="reply-input">
-<!-- 						<textarea placeholder="댓글을 입력해주세요"></textarea> -->
+						<textarea placeholder="댓글을 입력해주세요"></textarea>
-<!-- 						<button type="button">등록</button> -->
+						<button type="button">등록</button>
-<!-- 					</div> -->
+					</div>
 					<div class="reply-view">
 						<span class="user"><span class="id">익명6</span><span
 							class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의
@@ -87,13 +87,13 @@
 							class="date">05.02 13:00</span></span> <span class="text">여기는 댓글의
 							댓글(답글)정보!3333</span>
 					</div>
-<!-- 				</div> -->
+				</div>
-<!-- 				** -->
+				**
-			</div>
+			</div> -->
 		</div>
 		<div class="page-link" id="page-link">
-			<!--      <a id="prev">▲ 이전글<span class="page-link-ti">날씨가 좋네요.</span></a> -->
+		     <!-- <a id="prev">▲ 이전글<span class="page-link-ti">날씨가 좋네요.</span></a>
-			<!--      <a href="#none">▼ 다음글<span class="page-link-ti">덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다덥다</span></a> -->
+		     <a href="#none">▼ 다음글<span class="page-link-ti">덥다덥다덥다덥다덥다덥다</span></a> -->
 		</div>
 		<div class="btn-box">
 			<a href="/view/jh/board/list/1" class="btn gray">목록</a>
@@ -177,7 +177,7 @@
 		})
 	}
 	
-	/* 댓글 불러오기 아주 엉망진창으로 진행되는중입니다~ */
+	/* 댓글 불러오기 */
 	function callReply(boardId) {
 		$.ajax({
 			url: "/api/jh/reply/boardReply/" + boardId,
@@ -186,76 +186,41 @@
 			success: function(response) {
 				console.log(response)
 				
-				var commentBox = ""
+				/* comment */
-				$.each(response, function(i, item) {
+				$($(response).get().reverse()).each( function(i, item) {
-					console.log("부모 댓글 인덱스" + i)
-					console.log(item)
-					
-					/* comment */
 					if(item.targetId==0) {
 						var comment = 
 							"<div class='comment-view' id='user" + (i+1) + "'>" +
-							
 								"<span class='user'>" +
 									"<span class='id'>" + item.regUser + "</span>" +
 									"<span class='date'>" + item.regDate + "</span>" +
 									"<span>답글</span>" +
 								"</span>" +
 								"<span class='text' id='text'>" +	item.content + "</span>" +
-								
 							"</div>"
 							
+						$(".comment-input").after(comment)
+
+							/* reply */
 							$.each(item.targetReplys, function(idx, it) {
+								/* onclick으로 답글다는곳 나타나면 걔는 $('.reply-box').prepend(머시기) 하면 될듯 */
+								var rb = $("<div class='reply-box' id='user" + (i+1) + "'/>");
+								$(".comment-view").append(rb);
+								
 								var reply =
-									"<div class='reply-box'>" +
+	 								"<div class='reply-view' id='user" + (i+1) + "'>" +
-									/* 답글 눌렀을 때 뜨는 것 */
+										"<span class='user'>" +
-										"<div class='reply-view'>" +
+											"<span class='id'>" + it.regUser + "</span>" +
-											"<span class='user'>" +
+											"<span class='date'>" + it.regDate + "</span>" +
-												"<span class='id'>" + it.regUser + "</span>" +
+										"</span>" +
-												"<span class='date'>" + it.regDate + "</span"> +
+										"<span class='text'>" + it.content + "</span>" +
-												"<span>답글</span>" +
-											"</span>" +
-											"<span class='text'>" + it.content + "</span>" +
-										"</div>" +
 									"</div>"
+								
+								$('#user' + (i+1)).append(reply)
 							})
-							console.log(comment)
-// 						commentBox += comment;
 					}
-					$(".comment-input").after(comment);
-
-// 					console.log("자식댓글")
-// 					var replyBox = ""
-// 					$.each(item.targetReplys, function(j, it) {
-// 						/* 자식이 있을경우에만 살이 붙음 */
-// 						console.log(it)
-						
-// // 						var boxbox = $('#' + it.targetId);
-						
-// 						let rb = $("<div/>");	//class reply-box라고 줘야함... 어케주지......
-// // 						$('#test3').append(rb)
-// 						var targetId = it.targetId;
-// 						$('#user' + (it.targetId)).append(rb)
-					
-						
-// 						var reply =
-// // 							"<div class='reply-box'>" +
-// 								"<div class='reply-view'>" +
-// 									"<span class='user'>" +
-// 										"<span class='id'>" + it.regUser + "</span>" +
-// 										"<span class='date'>" + it.regDate + "</span>" +
-//										"<span>답글</span>" +
-// 									"</span>" +
-// 									"<span class='text'>" + it.content + "</span>" +
-// 								"</div>"
-// // 							"</div>"
-// 						rb.append(reply);
-// 						replyBox += reply;
-// 					})
-					
 				})
 				
-// 				$(".comment-input").after(commentBox);
 				
 				/* 댓글 개수 */
 				var count = response.length